Bootstrap Tooltip(Part 2)

There are certain options which can be added via the Bootstrap Data API or invoked via JavaScript. Following lists the options:

Animation:

Applies a CSS fade transition to the tooltip. Default boolean value is true.

Html:

Inserts HTML into the tooltip. If false, jQuery’s text method will be used to insert content into the dom. Use text if you’re worried about XSS attacks. Default boolean value is false.

Selector:

If a selector is provided, tooltip objects will be delegated to the specified targets. Default string value is false.

Trigger:

Defines how the tooltip is triggered: click| hover | focus | manual. You may pass multiple triggers, separate them with a space. Default string value is ‘hover focus’.

Delay:

Delays showing and hiding the tooltip in ms — does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is:

delay:

{ show: 500, hide: 100 }

Default object number value is 0.

Container:

Appends the tooltip to a specific element. Example: container: ‘body’. Default string value false.

Methods

Below we have the discussion of basic methods used in bootstrap tooltip:

$().tooltip(options):

This method attaches the tooltip handler to a group of elements.

<script type="text/javascript">

$(document).ready(function(){

$(".tooltip-examples a").tooltip({

title : 'It works in absence of title attribute.'

});

});

</script>

.tooltip(‘show’):

This method reveals an element’s tooltip. Let us see below the process for using this.

<script type="text/javascript">

$(document).ready(function(){

$(".show-tooltip").click(function(){

$(".tooltip-examples a").tooltip('show');

});

});

</script>

.tooltip(‘hide’):

This method hides an element’s tooltip. It is an opposite method of .tooltip(‘show’);

<script type="text/javascript">

$(document).ready(function(){

$(".hide-tooltip").click(function(){

$(".tooltip-examples a").tooltip('hide');

});

});

</script>

.tooltip(‘toggle’):

This method toggles an element’s tooltip.

<script type="text/javascript">

$(document).ready(function(){

$(".toggle-tooltip").click(function(){

$(".tooltip-examples a").tooltip('toggle');

});

});

</script>

.tooltip(‘destroy’)

This method hides and destroys an element’s tooltip.

<script type="text/javascript">

$(document).ready(function(){

$(".destroy-tooltip").click(function(){

$(".tooltip-examples a").tooltip('destroy');

});

});

</script>

let us look through a complete code in the below.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Example of Twitter Bootstrap 3 Tooltip Methods</title>

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".show-tooltip").click(function(){

$(".tooltip-examples a").tooltip('show');

});

$(".hide-tooltip").click(function(){

$(".tooltip-examples a").tooltip('hide');

});

$(".toggle-tooltip").click(function(){

$(".tooltip-examples a").tooltip('toggle');

});

$(".destroy-tooltip").click(function(){

$(".tooltip-examples a").tooltip('destroy');

});

});

</script>

<style type="text/css">

.bs-example{

margin: 60px;

}

</style>

</head>

<body>

<div>

<p>

<a href="#" data-toggle="tooltip" title="This is default title">Tooltip Example</a>

</p>

<div>

<p>Click on the following buttons to control the tooltip manually.</p>

<input type="button" value="Show">

<input type="button" value="Hide">

<input type="button" value="Toogle">

<input type="button" value="Destroy">

</div>

</div>

</body>

</html> 

If you find this article helpful, you can connect us in Google+ and Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *