Tooltips

Tooltips are those little hints or additional information you get when (on a desktop) you hover your mouse over an indicated word or phrase, and the little hint pops up.

Here's the trick: the web page designer/programmer should give the user some indication that there's a tool tip to be had, but it's not required. A coder so inclined could plant easter eggs all over the place. Place your cursor the phrase easter eggs in the previous sentence if you're not familiar with that term. I've used a variety of styles to indicate tooltips on this page so you can get an idea of what's possible.

One last thing you should be aware of. Apparently (or so I gather from my reading), there's no universal methodology for users to accessing tooltips on a touch screen, nor for coders to implement them. You can read about some solutions (which I haven't tried) here.

As you read through the following information, pay particular attention to sizing and positioning of the examples, and assuming you're not on a touch-screen device, resize your browser window for the examples to see how screen size affects when and if the information in the tooltip gets clipped off by the container. Some do, some don't.

Here's the trick: the web page designer/programmer should give you some indication that there's a tool tip to be had, but it's not required. There's a tool tip on this specific paragraph; if you mouse-over the paragraph or touch it on a touch screen, you can see my secret message! All the coder needs to do is insert a title attribute on the ‹p› or ‹whatever› tag.

To provide an HTML tooltip for a specific phrase or word, the coder needs to add a title attribute to the tag, and s/he should also add a style attribute. In the following paragraph, a word is green. It has a span tag surrounding the word 'title' and that tag has both a title and a style attribute. The style attribute suggests to the user to hover or touch it, and the title attribute has the text that will spring up.

Also note that if the person coding up the webpage fills in the title attribute for the ‹span› tag, that inserts a tooltip.

Here's a screen print of the HTML code for the above paragraph.

Screenprint of HTML code

That's really all there is to HTML tooltips!

Here is a tooltip This is the tooltip text. This is using the CSS styling I copied from the W3 Schools which saved some time, although I wound up having to reposition it anyway. styled by css.

The upside of a css tooltip is that you have more control over things like the background color, color of the text, etc, and you can add the little arrow, in case the user forgot which word or phrase they just tapped or clicked on. Here's an exampleThis is custom styled tooltip text. You can get the color scheme to match the color scheme of your site (as if anyone might really care). AND! It's right-aligned! of a custom styled tooltip. Resize your window so that the word example falls near the right edge of the block and then see what happens to the tooltip.

A possible downside is that the css styling is extensive, although after all, there is "copy and paste". You can copy and paste from the link I provided in the sidebar.

A more important downside is that if your page or site is large and you want to make extensive use of tooltips, you'd have to put in-line overrides for each tooltip to get the positioning and size correct. I had to reposition the default tooltip in the first paragraph because most of the text in the tooltip itself was getting clipped off. Because that's the only place I'm using that class in this site, I did it in the CSS, but that would be extremely impractical in almost all cases.

Here is an example of a bootstrap tooltip placed at the top of it's container.

And here is an example of a bootstrap tooltip using the same custom styling for the tooltip that I used in CSS tooltips, in other words, to match the site color scheme.

Because of the way Bootstrap handles styling of the tooltip itself, you can't style your bootstrap tooltips differently (which should only disturb someone who wants to style them differently, perhaps to indicate different categories of tooltips). You need to copy the selector '.tooltip-inner' from the bootstrap css to your own css, and style it there.

Here's what I love about the Bootstrap tooltips: they reposition as needed, the coder doesn't have to anticipate where it's going to fall. Resize your window to a pretty short height, so that you have to scroll to get the first tooltip in this section just under the menu. The tooltip repositions from top to bottom. That's huge! The other huge thing is the tooltip not getting clipped by the container. You can also set a max-width for the tooltip so the tooltip text isn't laid out in one really long box, as happens with the html tool tip.

Finally, with a Bootstrap tooltip you have to add a very brief script. I copied the 3 lines from the W3Schools site.

You may have noticed some of my tooltips got a trifle long. That's not because I have a tendency to get wordy (although I definitely have that tendency), but rather because longish text is one of the issues with tooltips.

For 'longer' information, a popover might be the way to go. It has a header and content, and auto positions. Also, popovers don't have to be triggered with a hover, they can also be triggered with a click, focus, or manually, and you can use combinations of those.

I just know you're breathlessly waiting to try out the example of a popover.

And finally, you DO have to provide a way for the user to dismiss the popover, as I discovered the hard way. That turns out to be fairly easy: I added data-trigger="hover" to the tag surrounding the text which did the trick. Without that, a hover will pop it up, but you can't dismiss it.

3 lines of jQuery code are needed, or if you've already got the 3 lines for the tooltips, 1 more line of code.

Positioning is the big problem in html and css tooltips. Bootstrap solves that problem.

You can do tooltips without using Bootstrap. W3Schools.com website has a quick tutorial on doing html tooltips here. The page on using css to do a tool tip is here.

The page that has the Bootstrap tooltip reference is here.

The page that has the Bootstrap popover reference is here.

Here's the script I used to enable the bootstrap tooltips and popover. Beware if you copy/paste that the "<  >" marks for the script tags might not transfer correctly even though they'll look fine. Just retype them.

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
    $('[data-toggle="popover"]').popover();
});
</script>