Jquery: How to show bootstrap tooltip

Question

In my case, tooltip is coming when user place mouse on input control but I want to trigger tooltip. Means when validation will fail, then tooltip will be display below input control.

this is the code i am using to show tooltip. just tell me what to edit in this code.

var options = { html: true, placement: 'bottom', title: '<div class="tooltip-alert alert-danger" data-placement="bottom">' + message + '</div>' };
        $(inputElement).addClass('validation-error');
        inputElement.tooltip("destroy")
            .addClass("error")
            .tooltip(options);

thanks

score 3 · Answer 1 · answered Jan 18 '16 at 11:32

3

Use this way:

$(element).tooltip("show");

So, when the validation error occurs, you need to use:

inputElement.tooltip("show");

answered Jan 18 '16 at 11:32

Praveen Kumar Purushothaman

164,888
24
203
252

@Thomas You have already initialized the options with `.tooltip(options);` before showing. So it has the options set. `:)` – Praveen Kumar Purushothaman Jan 18 '16 at 11:34
@Thomas Can you show me a working fiddle using http://jsbin.com please? It would be easy for me. Make sure it is working before you send me. `:D` – Praveen Kumar Purushothaman Jan 18 '16 at 11:38
thanks i understand but i notice when tooltip is showing and if i move mouse cursor on that input then tooltip is going....any work around exist? – Thomas Jan 18 '16 at 11:38
@Thomas Yes, there is. Give me a moment. – Praveen Kumar Purushothaman Jan 18 '16 at 11:38
i want tootip should not go. when validation success then it should go......what to do? – Thomas Jan 18 '16 at 11:39
@Thomas **Provide a http://jsbin.com Fiddle**, which will make both of our work simpler. – Praveen Kumar Purushothaman Jan 18 '16 at 11:52
can u tell me how to hide all open tooltip if i click on another button. – Thomas Jan 18 '16 at 11:55
@Thomas Use this: `$(".tooltip").tooltip("hide");` hides all the open tooltips. – Praveen Kumar Purushothaman Jan 18 '16 at 11:57

Help · Answer 2 · 2016-01-18T12:15:23.753

3

After going through the comments, I feel you need a static tooltip to be displayed when there is an error.

Bootstrap tooltip trigger=manual is what you require.

Here is the fiddle for you : Fiddle

Edit Added Hide button to hide tooltip.

Fiddle# 2

Hope this helps.

-Help :)

edited Jan 18 '16 at 12:15

answered Jan 18 '16 at 12:10

Help

1,156
7
11

in your fiddle there should be another button which would close tooltips when clicked. in my case tooltips is generated dynamically in each table cell. – Thomas Jan 18 '16 at 12:12
thanks for your code. when so many tooltips is opened then how could i close all. suppose tooltip related html is there in my each td and now i want to iterate table and extract one by one tooltip and hide it......how it will be possible? – Thomas Jan 18 '16 at 12:20
just have a look at this post http://stackoverflow.com/questions/34854273/jquery-how-hide-or-close-all-open-bootstarp-tooltip – Thomas Jan 18 '16 at 12:20

Jquery: How to show bootstrap tooltip

2 Answers2