This page demonstrates how to use the
tooltip include tag.
Tooltips allow you to add text that only shows up when the reader’s hovers their mouse over some anchor text.
This is the anchor text that will be displayed.I’m a tooltip!
style can be applied to the anchor text.
Here is some blue anchor text.Non-blue tooltip
Tooltips are aligned down and to the right of the anchor text, but in some cases, a different location would be preferable. For example:
BadThis tooltip, unfortunately, goes off the right-hand side of the screen, because we didn't take steps to position it differently.
But we can fix it using the
GoodThis tooltip, fortunately, does not go off the right-hand side of the screen, because we took steps to position it differently.
top property can be used to control a tooltip’s vertical placement.
Vertical overrideRarely needed, but good to know!
By default, short tooltips are rendered on a single line, while longer tooltips (48 characters or more) are given a fixed width of
Here’s a long tooltip with default width.Uh oh I have so much to say… should I really put it all in a tooltip? Sure, let’s go ahead and do it, just to demonstrate what it looks like.
But you can set the
width parameter to override it:
Here’s the same tooltip but 16em wide.Uh oh I have so much to say… should I really put it all in a tooltip? Sure, let’s go ahead and do it, just to demonstrate what it looks like.