You can create a lightweight CSS cross browser tooltip easily with a few lines of code.
The HTML:
1 | This is the <a class="tooltip" href="#">Tooltip Link<span>This will be the text that shows up in the tooltip</span></a> You can place any text you want here. |
The CSS:
1 | a.tooltip {position: relative} |
2 | a.tooltip span {display:none; padding:5px; width:200px;} |
3 | a:hover {background:#fff;} |
4 | a.tooltip:hover span{display:inline; position:absolute;} |
You can add more styles to the above to suit your design. The key is the span is set to display: none until you hover over the link. When you hover over the link the display is changed to show inline and given a position of absolute. position: relative is necessary on the link in order to ensure the tooltip is positioned in relation to the link and not another containing element.
0 comments:
Post a Comment