Bootstrap > Tooltips

Tooltips in Bootstrap

How to create tooltips in Bootstrap?


Tooltips

Tooltips are the small pop up box which appears when user place the mouse on the element or the tooltip is a small description of the action appears in the webpage

 <head>
    <script type="text/javascript">
    $(document).ready(function () {
        $(".tooltip-bar a").tooltip({
            placement: 'top'
        });
    });
    </script>
</head>
<body>
   <h2>Tooltips</h2>
    <div class="well">
        <ul class="tooltip-bar list-inline">
            <li><a href="#" class="btn btn-primary" data-toggle="tooltip" data-original-title="Home">DotNetFunda</a></li>
            <li><a href="#" class="btn btn-danger" data-toggle="tooltip" data-original-title="Tutorials">TechFunda</a></li>
            <li><a href="#" class="btn btn-warning" data-toggle="tooltip" data-original-title="Online Training">ITFunda</a></li>
        </ul>
    </div>
</body>
  • In the above code snippet we have defined the tooltip placing in the top
  • In the body of HTML page we have class attribute value as well in the div, class attribut value  tooltip-bar in the ul element and list-inline is used to get the values in the line 
  • In the li element we have created three buttons with btn-primary, btn-danger, btn-warning, data-toggle as tooltip and data-original-title defines the value in the tooltip, the list values are DotNetFunda, TechFunda and ITFunda
  • In the head section of the HTML page we are having the script function and jQuery to get the tooltip
  • In the next line we are calling the function  $(".tooltip-bar a")  calls the function of the body section  with placement: 'top' which gets the tooltip in the top of the button   

output

Tooltips with delay

Tooltips with delay is used to delay the tooltip on the page 

 <head> <script type="text/javascript">
    $(document).ready(function () {
        $(".tooltip-bar a").tooltip({
            delay:{show:1000}
        });
    });
    </script>
</head>
<body>
   <h2>Tooltips with delay</h2>
    <div class="well">
        <ul class="tooltip-bar list-inline">
            <li><a href="#" class="btn btn-primary" data-toggle="tooltip" data-original-title="Home">DotNetFunda</a></li>
            <li><a href="#" class="btn btn-danger" data-toggle="tooltip" data-original-title="Tutorials">TechFunda</a></li>
            <li><a href="#" class="btn btn-warning" data-toggle="tooltip" data-original-title="Online Training">ITFunda</a></li>
        </ul>
    </div>
</body>

Tooltips with delay

  • In the above code snippet we have defined the tooltip delay
  • In the body of HTML page we are having the class attribute value as well in the div and we have class attribute value as tooltip-bar in the ul element and list-inline is used to get the values in the line 
  • In the li element we have created three buttons with btn-primary, btn-danger, btn-warning, data-toggle as tooltip and data-original-title defines the value in the tooltip, the list values are DotNetFunda, TechFunda and ITFunda
  • In the head section of the HTML page we are having the script function and jQuery to get the tooltip
  • In the next line we are calling the function as $(".tooltip-bar a") calls the function of the body section with class attribute tooltip-bar and delay:{show:1000} gets the tooltip delay with value 1000

output

Tooltips with title

Title defines value in the tooltip

<script type="text/javascript">
    $(document).ready(function () {
        $(".tooltip-bar a").tooltip({
            title: 'Hai Welcome to bootstrap'
        });
    });
    </script>
</head>
<body>
   <h2>Tooltips with title</h2>
    <div class="well">
        <ul class="tooltip-bar list-inline">
            <li><a href="#" class="btn btn-primary" data-toggle="tooltip">DotNetFunda</a></li>
            <li><a href="#" class="btn btn-danger" data-toggle="tooltip" data-original-title="Tutorials">TechFunda</a></li>
            <li><a href="#" class="btn btn-warning" data-toggle="tooltip" data-original-title="Online Training">ITFunda</a></li>
        </ul>
    </div>
</body>

Tooltip with title

  • In the above code snippet we have defined the tooltip with title
  • In the bodysection og HTML page we are having the value of class attribute as well in the div and we have class attribute value tooltip-bar in the ul element and list-inline is used to get the values in the line 
  • In the li element we have created three buttons with btn-primary, btn-danger, btn-warning, data-toggle as tooltip and, we have given data-original-title  to only li element values TechFunda and ITFunda
  • In the head section of the HTML page we are having the script function and jQuery to get the tooltip
  • In the next line we are calling the function as $(".tooltip-bar a") calls the function of the body section with class attribute tooltip-bar and title:"Hai welcome to bootstrap"  applies to the li element value DotNetFunda  

output

Tooltip positions

Tooltip position is used to place the value in the top, bottom, left and right side 

<head>
<script type="text/javascript">
        $(document).ready(function(){
            $(".well-bottom").tooltip({placement:'bottom'});
            $(".well-left").tooltip({placement:'left'});
            $(".well-top").tooltip({placement:'top'});
            $(".well-right").tooltip({placement:'right'});
        });
    </script>
</head>
<body>
   <h2>Tooltips with placement using closing alert</h2>
    <div class=" alert alert-success">
        <div class="well">
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <ul class="list-inline">
                <li><a href="#" class="btn btn-primary well-bottom" data-toggle="tooltip" data-original-title="Forums">DotNetFunda</a></li>
                <li><a href="#" class="btn btn-danger well-left" data-toggle="tooltip" data-original-title="Tutorials">TechFunda</a></li>
                <li><a href="#" class="btn btn-warning well-top" data-toggle="tooltip" data-original-title="Online Training">ITFunda</a></li>
                <li><a href="#" class="btn btn-success well-right" data-toggle="tooltip" data-original-title="Kids">KidsFunda</a></li>
            </ul>
        </div>
    </div>
</body>

Tooltip with placement

  • In the above code snippet we have created tooltips to place in right, left, top, bottom using closing alert
  • In the body section of HTML page we have class attribute value as alert alert-success in the div , we have class attribute value as well in the div 
  • In the next line we are having the anchor tag to close the alert using class attribute value  as close and data-dismiss as alert
  • In the next line we are having the class with attribute value  as list-inline in the ul element, we have list values in the ul elements with button colors with well bottom, right, left, top with values dotnetfunda, techfunda, itfunda and KidsFunda with data-toggle as tooltip and data-original-title with given value 
  • In the head section of the HTML page we have the script function and jQuery to get the placement of the tooltip, we have the function as wellbottom, ,welltop, wellright, wellleft, .toolip calls the body function in the head section   

output

Tooltip actions

Tooltips are the actions performed by javascript

<script type="text/javascript">
    $(document).ready(function () {
        $(".show-well").click(function () {
            $(".tooltip-bar a").tooltip('show');
        });
        $(".hide-well").click(function () {
            $(".tooltip-bar a").tooltip('hide');
        });
        $(".toggle-well").click(function () {
            $(".tooltip-bar a").tooltip('toggle');
        });
        $(".destroy-well").click(function () {
            $(".tooltip-bar a").tooltip('destroy');
        });
    });
    </script>
</head>
<body>
   <h2>Tooltips actions</h2>
    <div class=" alert  alert-danger">
        <div class="well">
            <p class="tooltip-bar">
                <a href="#" class="btn btn-default" data-toggle="tooltip" data-original-title="Welcome to Home">Home</a>
            </p>
            <div>
                <p>Below are Tooltip actions from JavaScript</p>
                <input type="button" class="btn btn-success show-well" value="Show" />
                <input type="button" class="btn btn-primary hide-well" value="Hide" />
                <input type="button" class="btn btn-warning toggle-well" value="Toggle" />
                <input type="button" class="btn btn-danger destroy-well" value="Destroy" />
            </div>
        </div>
    </div>
</body>

Tooltip actions 

  • In the above code snippet we have defines the tooltip actions using script 
  • In the body section of HTML page we have class attribute value as alert-danger , class attribute value as well in the nother div
  • In the next line we are having the <p> paragraph with class tooltip-bar  and we have created the tooltip to default button  with value Home using class attribute value as btn default and data-toggle as tooltip and data-original-title as the given value 
  • In the next line we are having the another div and we have created buttons with colors and created show-well, hide-well, toggle-well, destroy-well in the buttons 
  • In the head section of HTML page we have script function and jQuery to call the function of the bosy in the head section
  • In the next line we are having the function show-well, hide-well, toggle-well, destroy-well with .tooltip(show, hide, toggle, destroy) which performs the functions as per given values

outp

 Views: 622 | Post Order: 44



Write for us