We often hear tooltip terminology in the computer world or programming. Tooltip can be defined as information used to explain function of element graphic or button. It’s used in conjunction with a cursor, usually a mouser pointer. A tooltip may appear when user hovers the cursor over an element graphic or button, as hover box with detail information about it.

In the old program, Tooltip is displaying a description of the tool in a status bar. Term which refer is same intention, such as Screentip, Ballon help. In the database application of web page, we often use element graphic or icon to make it as toolbar, such as view, edit or delete. In this situation, we use tooltip as explain or description of the icon / button like toolbar in the office application.

In this discussion, we will make tooltip on web page with simple technique but it’s full power, effective and efficient. We create it with CSS ( cascading style sheet), so it’s very easy, less code and simple for implementation. Following source bellow, it’s as example in the our discussion.

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
/* CSS style layout for tooltip */
a,
a:visited,
a:link {
    text-decoration: none;
}
 
a.simple-tooltip span {
    display: none;
    margin-left: 15px;
    margin-top: 15px;
    padding: 2px 3px;
    width: 150px;
}
 
a.simple-tooltip:hover span {
    background:#FDFBAA none repeat scroll 0 0;
    border:1px solid #DEE306;
    color:blue;
    display:inline;
    position:absolute;
    text-align:center;
}
 
 
/* Implementation in the web page */
 
      <td class="center">
                        <a href="#" class="simple-tooltip">
                            View
                            <span>Click to view item</span>
                        </a> 
                        |
                        <a href="#" class="simple-tooltip">
                            Edit
                            <span>Click to edit item</span>
                        </a> 
                        |
                        <a href="#" class="simple-tooltip">
                            Delete
                            <span>Click to delete item</span>
                        </a>
                  </td>

In this technique, the tooltip will displayed when mouse over on the text link, with set style of the text of tooltip set to display: inline. Style of the text of tooltip is display: none by default. We will see result of this technique as picture bellow.

Create Simple Tooltip with CSS

Create Simple Tooltip with CSS

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • Slashdot
  • Technorati
  • YahooMyWeb