Bootstrap -Tooltip Plugin

Aditya kumar
Last Updated: May 13, 2022

Introduction

When you need to describe a link, tooltips come in handy. jQuery was the inspiration for the plugin. Jason Frame created the tipsy plugin. Since then, tooltips have been improved to work without images, animate with CSS animations, and save local titles using data attributes.

When the user moves the mouse pointer over an element, the Tooltip plugin shows as a little pop-up box.

 

How to create a Tooltip?

The tooltip plugin generates content and markup on demand, and tooltips are placed after their trigger element by default. Tooltips can be added in one of two ways:

Using data attributes

Add data-toggle = "tooltip" to an anchor tag to add a tooltip. The text of a tooltip will be the title of the anchor. The plugin sets the tooltip to the top by default.

<a href="#" data-toggle="tooltip" title="Example tooltip">Hover</a>

 

Using Javascript

Trigger the tooltip using Javascript

$('#identifier').tooltip(options)

 

The tooltip plugin is not the same as dropdown or other CSS-only plugins covered in earlier chapters. To utilise this plugin, you must use jquery to activate it (read javascript). Simply use this script to activate all of the tooltips on your website:

$(function () { $("[data-toggle = 'tooltip']").tooltip(); });

 

Example using Tooltip

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
    <h4>Tooltip examples</h4>
    This is a <a href="#" class="tooltip-test" data-toggle="tooltip" title="Tooltip on left">
        Default Tooltip
    </a>.
    This is a <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
        Tooltip on Left
    </a>.
    This is a <a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
        Tooltip on Top
    </a>.
    This is a <a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
        Tooltip on Bottom
    </a>.
    This is a <a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
        Tooltip on Right
    </a>

    <br>

    <h4>Tooltip examples for buttons</h4>
    <button type="button" class="btn btn-default" data-toggle="tooltip" title="Tooltip on left">
        Default Tooltip
    </button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
        Tooltip on left
    </button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
        Tooltip on top
    </button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
        title="Tooltip on bottom">
        Tooltip on bottom
    </button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
        Tooltip on right
    </button>
    <script>
        $(function () { $("[data-toggle='tooltip']").tooltip(); });
    </script>
</body>
</html>


Output

Features

Certain features can be added using the Bootstrap Data API or called using JavaScript. The options are listed in the table below:

Feature Name

Type/Default Value

Data attribute name

Description

animationboolean Default: truedata-animationThe tooltip is given a CSS fade transition.
htmlboolean Default: falsedata-htmlThis command adds HTML to the tooltip. If false, the text method of jQuery will be utilised to add content to the dom. If you're concerned about XSS assaults, use text.
placementstring|function Default: topdata-placement

The position of the tooltip (top|bottom|left|right|auto) is specified.

When auto is provided, the tooltip will reorient itself dynamically. If the placement is set to "auto left," the tooltip will appear to the left when possible and to the right otherwise.

selectorstring Default: falsedata-selectorTooltip objects will be delegated to the given targets if a selector is provided.
titlestring | function Default: "data-titleIf the title property isn't present, the title option is used as the default title value.
triggerstring Default: 'hover focus'data-triggerThis property specifies how the tooltip is triggered: Hover | click | concentrate | manual You can pass numerous triggers; use a space to separate them.
contentstring | function Default: ''data-contentIf the data-content attribute isn't set, the default content value is used.
delaynumber | object Default: 0data-delay

The time it takes for the tooltip to appear and disappear in milliseconds does not apply to the manual trigger type. The delay is applied to both conceal and display if a number is provided. The object's structure is as follows:

delay: { show: 500, hide: 100 }

containerstring | false Default: falsedata-containerThe tooltip is appended to a specified element. 'body' is an example of a container.

These parameters can be set using data attributes or JavaScript. Simply append the option name to data-bs- along with the relevant value to define the tooltips options using data attributes, such as data-bs-animation="false," data-bs-placement="bottom," and so on.

Also, update the case type of the option name from camelCase to kebab-case when delivering the choices via data attributes. Instead of using data-bs-customClass="my-class," for example, use data-bs-custom-class="my-class."

JavaScript, on the other hand, is the preferred method of configuring these settings because it eliminates the need for repetitive labour. 

Methods for Tooltip

Method

Description

Example

Options − .tooltip(options)

Attaches a tooltip handler to a group of elements.

$().tooltip(options)

 

Toggle − .tooltip('toggle')

Toggles the tooltip of an element.

$('#element').tooltip('toggle')

 

Show − .tooltip('show')

The tooltip of an element is revealed.

$('#element').tooltip('show')

 

Hide − .tooltip('hide')

The tooltip of an element is hidden.

$('#element').tooltip('hide')

 

Destroy − .tooltip('destroy')

The tooltip of an element is hidden and destroyed.$('#element').tooltip('destroy')

 

Example of Methods

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
    <div style="padding: 100px 100px 10px;">
        This is a <a href="#" class="tooltip-show" data-toggle="tooltip" title="show">Tooltip on method show
        </a>.

        This is a <a href="#" class="tooltip-hide" data-toggle="tooltip" data-placement="left" title="hide">Tooltip on
            method hide
        </a>.

        This is a <a href="#" class="tooltip-destroy" data-toggle="tooltip" data-placement="top" title="destroy">Tooltip
            on method destroy
        </a>.

        This is a <a href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="bottom"
            title="toggle">Tooltip on method toggle
        </a>.
        <br><br><br><br><br><br>
        <p class="tooltip-options">
            This is a <a href="#" data-toggle="tooltip" title="<h2>'am Header2
               </h2>">Tooltip on method options
            </a>.
        </p>

        <script>
            $(function () { $('.tooltip-show').tooltip('show'); });
            $(function () { $('.tooltip-hide').tooltip('hide'); });
            $(function () { $('.tooltip-destroy').tooltip('destroy'); });
            $(function () { $('.tooltip-toggle').tooltip('toggle'); });
            $(function () {
                $(".tooltip-options a").tooltip({ html: true });
            });
        </script>
    </div>
</body>

</html>


Output

Events

The events that can be used with the tooltip plugin are shown in the table below. To hook into the function, utilise this event.

Event

Description

Example

show.bs.tooltipWhen the display instance method is called, this event is triggered instantly.

$('#myTooltip').on('show.bs.tooltip', function () {

   // write here

})

shown.bs.tooltipWhen the tooltip is displayed to the user, this event is triggered (will wait for CSS transitions to complete).

$('#myTooltip').on('shown.bs.tooltip', function () {

   // write here

})

hide.bs.tooltipWhen the hide instance method is called, this event is instantly fired.

$('#myTooltip').on('hide.bs.tooltip', function () {

   // write here

})

hidden.bs.tooltipWhen the tooltip has been hidden from the user, this event is triggered (will wait for CSS transitions to complete).

$('#myTooltip').on('hidden.bs.tooltip', function () {

   // write here

})

 

Example of Events

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
    <h4>Tooltip examples</h4>
    This is a <a href="#" class="tooltip-show" data-toggle="tooltip" title="Default Tooltip">Default Tooltip
    </a>.
    <script>
        $(function () { $('.tooltip-show').tooltip('show'); });
        $(function () {
            $('.tooltip-show').on('show.bs.tooltip', function () {
                alert("Alert message on show");
            })
        });
    </script>
</body>

</html>


Output

Frequently Asked Questions

1. Why is the Tooltip plugin used?

Tooltip is a plugin in the Bootstrap Framework that shows a little pop-up box when the mouse pointer hovers over an element. When a user hovers over a link, button, or another element, a little pop-up providing a tip or information about the element appears. When we want to display the purpose of each component on the homepage just by moving the mouse pointer over it, we utilise this Tooltip Plugin.

 

2. What is the positioning in Tooltip?

The bootstrap tooltip plugin is always shown on top of the element by default. However, we can utilise the data-placement feature to adjust the tooltip plugin's position, allowing us to set it on the top, bottom, left, or right side of the element.

<a href="#" data-toggle="tooltip" 
    data-placement="top" 
    title="Tooltip on top">
    Tooltip on top
</a>

<a href="#" data-toggle="tooltip" 
    data-placement="bottom" 
    title="Tooltip on bottom">
    Tooltip on bottom
</a>

<a href="#" data-toggle="tooltip" 
    data-placement="left" 
    title="Tooltip on left">
    Tooltip on left
</a>

<a href="#" data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right">
    Tooltip on right
</a>

 

Tooltips can also be positioned using JavaScript:

<script>
    $(document).ready(function () {
        $(".tooltip-top").tooltip({ placement: "top" });
        $(".tooltip-right").tooltip({ placement: "right" });
        $(".tooltip-bottom").tooltip({ placement: "bottom" });
        $(".tooltip-left").tooltip({ placement: "left" });
    });
</script>

Key takeaways

In this article, we have seen the uses of the tooltip plugin in bootstrap. A tooltip is a little pop-up that shows when the mouse pointer is held over an element, such as a link or a button, to provide information or hints about the element.

Tooltips can be quite useful for new visitors to your website since they allow the user to learn the function of icons and links just by hovering the mouse over them.

If you want to get started with bootstrap for free and want to learn more about it then you can visit Learn Bootstrap and checkout our blog to know why bootstrap is cool and how it helps you in designing your website with Responsive Network Vanilla utilising HTML, CSS & Bootstrap.

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think