A tooltip, aka infotip or hint, is a small box of text
that appears when a user hovers the mouse pointer over an item, such as a
particular word or phrase, on a webpage. If you wish to display a
tooltip when a user hovers the mouse pointer over text on a webpage,
there are a number of ways you can do so. The simplest way to do so
is to specify a title attribute, which is an
HTML global attribute with the
span tag. E.g.:
<span title="This is the tooltip text to be displayed when the mouse is hovered over the spanned text.">example text</span>
This is an example using the above technique with example text.
If you hover the mouse pointer over "Color Temperature", "Life Hours", "Wattage", "Lumens", or "Voltage" on the specifications list on the TCP 2R3016 6 Watt - 65 Watt Equal - Warm White Bulb page, you will see other examples.
Another alternative is to use Cascading Style Sheets (CSS) as shown at CSS Tolltip on the w3schools.com website. E.g., on the TCP 2R3016 6 Watt - 65 Watt Equal - Warm White Bulb page, if you hover the mouse pointer over "R30" in the first sentence on the page, which begins with "The TCP 2R3016 16-watt R30", you will see a tooltip displayed using that method. The page incudes the following code for that first sentence:
The TCP 2R3016 16-watt <div class="tooltip">R30<span class="tooltiptext">The "R" stands for reflector and indicates there is a mirrored coating on the back of the light bulb to improve light output. the diameter of the light bulb in eighths of an inch. So, an R30 is 30/8 inches, or three and 3/4 inches in diameter.</span></div> <a href="https://en.wikipedia.org/wiki/Compact_fluorescent_lamp" rel="nofollow"> compact fluorescent light (CFL)</a> bulb is suitable for <a href="https://en.wikipedia.org/wiki/Recessed_light" rel="nofollow"> recessed lights</a>, aka canister lights, cans, pot lights, and for track lighting, or outdoor lighting.
I.e.:
The TCP 2R3016 16-wattTo use that method, I include the following line in the head section of the webpage:
<link rel="stylesheet" href="/css/tooltip.css" type="text/css">
The tooltip.css file includes the following CSS statements:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 320px;
background-color: black;
color: #fff;
text-align: left;
padding: 10px;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
The code above could also be included between <style>
and </style> tags in the head element of the webpage
rather than in a separate file referenced by a link tag.
If I didn't want the hoverable text to have dots under it, I could remove
the border-bottom: 1px dotted black; line. The width of the box
that appears is controlled by width: 320px;. I could make the
box smaller or larger by altering the number of
pixels (px) to
be used for the box width. The color of the text and the background color
are controlled by the two lines shown below:
background-color: black;
color: #fff;
Either color names, e.g., "black", or the hexadecimal equivalents of those names, e.g., "fff" for "white" can be used.
In this case, I used text-align: left; to align the text
to the left side of the box. I could have used text-align: center;
if I wanted all the lines of text centered in the box. The padding between
the text and the sides of the box are controlled by padding: 10px;.
In this case, I made the space between the sides of the box and the text
within the box the same on all sides. But you can have different padding on
different sides. E.g., I could have used the following line, instead:
padding-top: 5px; padding-bottom: 10px; padding-left: 7px; padding-right: 7px;