Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Bootstrap tooltip manual trigger

Suggested Video Tutorials
Part 41 - Bootstrap modal methods and events
Part 42 - Bootstrap tabs plugin
Part 43 - Bootstrap tooltip

In this video we will discuss how to manually trigger a bootstrap tooltip.

One of the options that can be passed to the bootstrap tooltip method is the trigger option.

The trigger option specifies how the tooltip should be triggered. The following are the values that can be specified for the trigger option. Multiple triggers can be specified by separating them with a space. manual cannot be combined with any other trigger. 
Tooltip trigger option values

The default trigger value is 'hover focus'. This means, by default the tooltip is triggered when the element receives focus or on hover. In the example below, the tooltip is triggered as soon as the textbox receives focus or on hover.
bootstrap textbox tooltip

Name : <input type="text" id="txtName" data-toggle="tooltip"
                title="Your full name" />
<span class="glyphicon glyphicon-info-sign" id="infoIcon"></span>

$(document).ready(function () {

Showing and hiding the tooltip on click : This can achieved just by setting to trigger option to click as shown below. With this change the tooltip will not be triggered on focus and on hover.

$(document).ready(function () {
        trigger: 'click'

Triggering the tooltip manually : The textbox tooltip should be triggered only when the icon "i" is clicked. The tooltip should not be triggered when the textbox receives focus, or on hover or on click. This is when the manual trigger is useful.
bootstrap tooltip manual trigger

To achieve this
1. Set the trigger option to manual 
2. With in the click event handler of the icon, call .tooltip('toggle') method

$(document).ready(function () {
        trigger: 'manual'

    $('#infoIcon').click(function () {

If you want the tooltip to be triggered on hover instead of click, simply change the click event handler to hover as shown below.

$('#infoIcon').hover(function () {

bootstrap tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.