JQuery  

Simply Tooltip Using jQuery and Bootstrap

Introduction

Here, we will see different ways to set up a Tooltip for our daily use. As we know, a tooltip is a really useful Web feature that helps us to show help text or key information to users interacting with our site.

The simple definition of Tooltip is that it could be text, an image, or something else that appears when you move your mouse cursor over html elements, images, hyperlinks/ anchors, or something else that makes up the graphical user interface (GUI).

I am going to show you different ways to show a Tooltip.

  • Using jQuery

  • Using Bootstrap

Using jQuery

Below are the files we need to include in our page to make the jQuery Tooltip work.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"  
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="  
        crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"  
        integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="  
        crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

HTML

<p>  
    <a href="#" id="ancTag" title="Hi I am tooltip on Anchor">Tool Tip on Anchor Tag</a>  
</p>
<p>  
    <label>Your Age:</label>  
    <input id="txtAge" title="The age should be above 18">  
</p>
<div title="I am a tooltip of Div" style="border: solid 1px #ddd; background-color: #eee; display: inline-block; padding: 5px;">  
    Hey I am Div  
</div>

Script

<script type="text/javascript">
$(document).ready(function() {
    $(document).tooltip();
});
</script>

Here, it will apply a Tooltip to the whole document for all the tags that have the attribute title.

We can also apply Tooltip specifically to the tag by using an element ID like below, not the whole document.

<script type="text/javascript">  
    $(document).ready(function() {  
        $("#txtAge").tooltip();  
        $("#ancTag").tooltip();  
        $("#div").tooltip();  
    });  
</script>

Screen

Tooltip

Note. Here, it directly uses the title attribute from our HTML tag to get the text to show as a Tooltip

Other options we will learn with the jQuery Tooltip.

  • content

  • track

  • disabled

  • position

If we want to set the tooltip text dynamically, we can use the content option like below, with other options above.

<script>  
    $(function() {  
        $("#txtAge").tooltip({  
            content: "<strong>I am from script</strong>",  
            track: true  
        });         
        $("#div").tooltip({  
            disabled: true  
        });  
    });  
</script>

Here we are setting tooltip text from script with track: true, which means it will follow the mouse to show the tooltip position.

To disable the tooltip, we can use the disabled: true property.

To set the tooltip position, we can use position attributes like below.

<script>  
    $(function() {  
        $("#ancTag").tooltip({  
            position: {  
                my: "center bottom",  
                at: "center top-10",  
                collision: "none"  
            }  
        });  
    });  
</script>

Tooltip will appear based on the position properties set up like above.

Using Bootstrap

Below are the files we need to include in our page to make a Bootstrap Tooltip work.

<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>

Scripts

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

Note: I will apply the Tooltip setup wherever it finds data-toggle attributes in the page.

HTML

<div class="container">  
    <h2>Bootstrap Tooltip Example</h2>  
    <br>  
    <ul class="list-inline">  
        <li>
            <button class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Hello I am on Top">
                Sample Data - Top
            </button>
        </li>  
        <li>
            <button class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="Hello I am on Bottom">
                Sample Data - Bottom
            </button>
        </li>  
    </ul>  
    <ul class="list-inline">  
        <li>
            <button class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Hello I am on Left">
                Sample Data - Left
            </button>
        </li>  
        <li>
            <button class="btn btn-info" data-toggle="tooltip" data-placement="right" title="Hello I am on Right">
                Sample Data - Right
            </button>
        </li>  
    </ul>  
    <ul class="list-inline">  
        <li>
            <button class="btn btn-primary" data-toggle="tooltip" title="Hello I am on Default Top">
                Sample Data (No Placement)
            </button>
        </li>  
    </ul>  
    <br>  
    <p>So here we use the data-placement attribute to set up the tooltip position.</p>  
</div>

Note. So here it first checks the attribute named data-toggle='tooltip' present in any tag and then uses the title attribute to get the text to show as a Tooltip.

For a feature for placement (where you want to show the Tooltip) we need to use another attribute named data-placement and its value could be any one from the below list.

  • top (data-placement="top" - so it will show Tooltip on the top side of the element)

  • bottom(data-placement="bottom" - so it will show Tooltip on the bottom side of the element)

  • left(data-placement="left" - so it will show Tooltip on the left side of the element)

  • right(data-placement="right" - so it will show Tooltip on the right side of the element)

Note. Top is the default if you do not supply anything - the data-placement attribute is optional.

Screens

(Top & Bottom Placement)

top_bottom1

(Left & Right Placement)

left_right

(Default Placement, which is Top)

Default Placement

Other options

We can control specific Tooltip configuration as below.

// Select a specified element id or class name  
$('#elementid').tooltip();

We can customize the look of the Tooltip with the help of classes below in css.

<style>  
    /* Main Tooltip Css Class */  
    .test + .tooltip > .tooltip-inner {  
        background-color: #666;   
        color: #FFFFFF;   
        border: 1px solid #666;   
        padding: 5px;  
    }  

    /* Placement specific Classes */  
    /* Placement top */  
    .test + .tooltip.top > .tooltip-arrow {  
        border-top: 5px solid #666;  
    }  

    /* Placement bottom */  
    .test + .tooltip.bottom > .tooltip-arrow {  
        border-bottom: 5px solid #666;  
    }  

    /* Placement left */  
    .test + .tooltip.left > .tooltip-arrow {  
        border-left: 5px solid #666;  
    }  

    /* Placement right */  
    .test + .tooltip.right > .tooltip-arrow {  
        border-right: 5px solid #666;  
    }  
</style>

We can also show and hide the Tooltip on the click event as below.

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

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

Here, I have tried to show the basic options that we can use from jQuery and Bootstrap to manage tooltips easily.

There are other properties available to handle some kind of events with the jQuery and Bootstrap Tooltip configuration.

I hope you like this article.

Many thanks for reading!!

Membership not found