HTML – CSS Multiline Tooltips

(No Ratings Yet)

Loading ...

1,790 views

This document explains how to make nice multiline tooltip for HTML documents, using simple and standard CSS, HTML and JavaScript.

1 Standard HTML tooltip

The “title” attribute of HTML’s tags can be used to create simple tooltips. When the cursor stays over the tag for few seconds, the browser shows automatically the tooltip. But the tooltip’s look and layout depend on the browser, and they are not configurable. If one just wants to split the tooltip’s contents into two or more lines, there is not standard way to do this. For example:

Standard HTML tooltip

<img ... title="Printable version" />

2 How to make cool tooltip

Using CSS and few lines of JavaScript it is possible to make tooltips whose contents can be any HTML, including images, tables, whatever can fit into a [code class="western"] [/code]

tag. Here is an example:

.xstooltip
{
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; 

    font: normal 8pt sans-serif;
    padding: 3px;
    border: solid 1px;
}

This defines the element as hidden, positioned at (0,0), and it sets the z-order of the element to a value higher than 0, to have it on top of other elements in the page.

The position is set to (0,0) in order to let the browser automatically calculate the size of the

based on its actual contents. If it would be positioned directly relative to its parent, and the position was near the right border of the browser’s window, the

would be formatted as a narrow and tall rectangle.

Other CSS directives can be applied to the style; like font, border and padding in the example.

To add the background transparency as in the image above simply add:

  background-repeat: repeat;
    background-image: url(images/blue.png);

Where the background image is a 16×16 png having a blue color with some degree of alpha transparency. This would not work in IE, because it does not support transparent PNG images.

<div id="tooltip_123" class="xstooltip">
Time spent: 00:00:08<br />
Page viewed: 4<br />
Location: Loopback <img src='flags/x0.gif' /><br />
Browser: Mozilla – 1.7.11<br />
Operating system: Linux - i686 (x86_64)
</div>

The

tag must have an unique id attribute identifying itself and must have the CSS style defined above (either using the class or style attribute). It will be not visible when the page is loaded, but the browser will calculate its size depending on its contents.
2.3 onMouseOver – onMouseOut

The element that owns the tooltip has to place into its onMouseOver attribute the JavaScript code that positions and shows the tooltip, and into its onMouseOut attribute the code that hides it again, like in:

<img id="the_image"
    ....
    onmouseover="xstooltip_show('tooltip_123', 'the_image', 289, 49);"
    onmouseout="xstooltip_hide('tooltip_123');"
/>

The source of the xstooltip_show() and xstooltip_hide() functions will be examined in details later in the document. Now let’s just see their definition and usage:

Demo: http://www.skyrocket.be/lab/semantic_horizontal_form.html

Download: http://www.texsoft.it/web2005/download/download.php

Source: http://www.texsoft.it/index.php?%20m=sw.js.htmltooltip&c=software&l=it

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/stumbleupon_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/delicious_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/blinklist_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/furl_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/technorati_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/magnolia_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/google_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/myspace_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/facebook_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/sphinn_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/mixx_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/twitter_32.png

Related Listings:

Style Your Websites Tooltips With Prototip Now it’s very easy to creat complex tooltips. Here is...
Bubble Tooltips : Javascript Bubble Tooltips are an easy way to add (via a...
ToolTip using MooTools Tooltip let’s you create mouse over tooltips to your content...

Do you like this post?

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL