Bootstrap - Tooltips: A Beginner's Guide

Hello there, future web developers! Today, we're going to dive into the wonderful world of Bootstrap tooltips. As your friendly neighborhood computer teacher, I'm here to guide you through this journey step by step. Don't worry if you've never written a line of code before – we'll start from the very beginning and work our way up. So, grab a cup of coffee (or your favorite beverage), and let's get started!

What are Tooltips?

Before we jump into the nitty-gritty, let's understand what tooltips are. Have you ever hovered your mouse over an icon or text on a website and seen a small pop-up with additional information? That's a tooltip! They're like little helpers that provide extra context or explanations without cluttering up your main content.

Enable Tooltips

Now, let's get our hands dirty with some code. The first thing we need to do is enable tooltips in Bootstrap. Don't worry; it's easier than it sounds!

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

This little script tells Bootstrap, "Hey, we want to use tooltips on this page!" It's like turning on the light switch before you can see in a dark room.

Creating a Tooltip

Let's create our first tooltip. It's as simple as adding a few attributes to an HTML element:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="I'm a tooltip!">
  Hover over me
</button>

Here's what's happening:

• We're creating a button using Bootstrap's btn and btn-secondary classes.
• data-toggle="tooltip" tells Bootstrap that this element should have a tooltip.
• title="I'm a tooltip!" is the text that will appear in our tooltip.

When you hover over this button, you'll see "I'm a tooltip!" pop up. Magic, right?

Tooltips on Links

Tooltips aren't just for buttons. Let's add one to a link:

<a href="#" data-toggle="tooltip" title="Click me to go somewhere!">Hover over this link</a>

This works the same way as our button example. When you hover over the link, you'll see the tooltip message.

Custom Tooltips

Now, let's get a bit fancier. We can customize our tooltips to make them more interesting:

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true" 
        title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Hover for HTML tooltip
</button>

In this example, we've added data-html="true" to allow HTML in our tooltip. Now we can use tags like <em>, <u>, and <b> to style our tooltip text.

Positioning of a Tooltip

We can control where our tooltip appears relative to our element. Let's try all four positions:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Top tooltip">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Right tooltip">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Bottom tooltip">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Left tooltip">
  Tooltip on left
</button>

The data-placement attribute tells Bootstrap where to position the tooltip. It's like telling your friend where to stand for a photo!

Tooltip with Custom HTML

Remember how we enabled HTML in our tooltip earlier? Let's take that a step further:

<button type="button" class="btn btn-danger" data-toggle="tooltip" data-html="true" 
        title="<h3>Custom Header</h3><p>This is a paragraph.</p><img src='smiley.gif' alt='Smiley face'>">
  Hover for a surprise!
</button>

This tooltip includes a header, a paragraph, and even an image! It's like a mini webpage inside your tooltip.

Markup

Sometimes, you might want more control over your tooltip's structure. That's where custom markup comes in:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-template='<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' title="Custom tooltip">
  Custom tooltip markup
</button>

This example uses the data-template attribute to define a custom structure for our tooltip. It's like building a house instead of buying one pre-made!

Tooltip on Disabled Elements

Usually, disabled elements don't trigger user interactions. But with a little trick, we can make tooltips work on them:

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

We're wrapping our disabled button in a span that can receive focus. It's like giving a helper to someone who can't reach the top shelf!

Options

Finally, let's look at some options we can use to customize our tooltips even further:

Option	Type	Default	Description
animation	boolean	true	Apply a CSS fade transition to the tooltip
container	string | false	false	Appends the tooltip to a specific element
delay	number | object	0	Delay showing and hiding the tooltip (ms)
html	boolean	false	Allow HTML in the tooltip
placement	string | function	'top'	How to position the tooltip
selector	string	false	If a selector is provided, tooltip objects will be delegated to the specified targets
template	string	<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>	Base HTML to use when creating the tooltip
title	string | element | function	''	Default title value if title attribute isn't present
trigger	string	'hover focus'	How tooltip is triggered - click | hover | focus | manual

You can use these options when initializing your tooltips:

$('#example').tooltip({
    animation: false,
    delay: { "show": 500, "hide": 100 },
    placement: 'right'
});

This code turns off the fade animation, adds a delay, and places the tooltip on the right side of the element.

And there you have it! You've just taken your first steps into the world of Bootstrap tooltips. Remember, the key to mastering this (and any coding concept) is practice. Try creating a webpage and adding different types of tooltips to it. Experiment with the options and see what you can create.

Before you know it, you'll be the tooltip master, and your webpages will be informative and interactive! Happy coding, and don't forget to have fun along the way!

Credits: Image by storyset