JavaScriptless Tool Tips

Reference on Tuesday, August 26th, 2008

Tooltips are a useful feature that can be used to elaborate on information without creating another page or linking to another source. It presents the user with immediate results. There are a variety of tooltips available that utilize JavaScripts advantages. Even though most are widely compatible with browsers there is still a small percentage of users that would not see the tooltip when activated with JS.

To solve this problem a CSS solution can be deployed that would work everywhere. There are no bells and whistles but if you require them I would suggest going the JavaScript route.

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/* Required */
.tooltip{
position:relative;
cursor:default;
}
.tooltip:hover{
z-index:2;
}
.tooltip .tooltipContent{
display:none;
}
.tooltip:hover .tooltipContent{
display:block;
position:absolute;
left:10px;
top:10px;
}
/* Tooltip styling */
.tooltip .tooltipHandle{
font-weight:bold;
text-decoration:underline;
}
.tooltip:hover .tooltipContent{
width:200px;
padding:10px;
background-color:#FFF;
border:1px solid #000;
}

XHTML:

1
2
3
4
5
6

<span class="tooltip">
<span class="tooltipHandle">Tool Tip Example</span>
<span class="tooltipContent">
Nullam dolor. Aliquam sem tortor, luctus eu, blandit eu, interdum vel, neque.
</span>
</span>

To view a working example Click Here.

Share This

Trackbacks/Pingbacks

  1. JavaScripted Tooltips | Dolfo.org says:
    March 24, 2009 at 8:21 am

    [...] For a quick alternative check out my JavaScriptless Tooltips. [...]

    Reply

Leave a Reply