Question

Technologies:

javascript

html

Tolerim

a day ago

How do I create a Bootstrap tooltip that is triggered by a condition?

I have come across a simple JavaScript code snippet that features an HTML input form. The code is as follows: Upon hovering over the "#myinput" element, the tooltip will be displayed if the "condition" is true. However, if the condition returns false, the tooltip will still be displayed, which is not ideal. Is there a way to resolve this issue?

$("#myinput").hover(function(){
    if(condition){
        $(this).tooltip({placement: "bottom", title: "mytitle"}); 
    }
});

Here is the HTML input form:

<input data-toggle="tooltip" type="password" placeholder="Enter your Password" id="myinput" name="password" required />

Answers(1)

Accepted Answer

One solution could be to call the tooltip("destroy") method on the $("#myinput") element when the condition is false. This will remove the tooltip from the element and prevent it from showing when hovering over it. Here's an updated version of the code with the fix:

$("#myinput").hover(function(){
    if(condition){
        $(this).tooltip({placement: "bottom", title: "mytitle"}); 
    } else {
        $(this).tooltip("destroy"); // remove the tooltip
    }
});

This code checks if the condition is false and then calls the tooltip("destroy") method on $(this) (which refers to the $("#myinput") element). This will destroy the tooltip and prevent it from showing when hovering over the element.