引导工具提示不适用于鼠标悬停

Question

I am trying to do to Bootstrap tooltip on mouse hover on an input field of a form but it's not working. If you click on the input field, it shows the tooltip. However, I want it show on mouse hover and hide after 5 seconds. Here is the jsfiddle . This is the Javascript code.

$(function() {
    $("#number").popover({
        title: 'Enter Mobile Number', 
        content: "Please enter 10 digit mobile number prefixed by country code eg +911234567890"
    });  
});

Answer 1

You need to provide attribute data-trigger :

data-trigger="hover"

Try something like this: FIDDLE

<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+917676462182" rel="popover" data-trigger="hover"/>

Answer 2

To make the popover work on hover, you have to use the trigger: 'hover' method available to the popover. You can also add a delay by adding the delay attribute. For example:

$(function () { 
    $("#number").popover({
        title: 'Enter Mobile Number', 
        content: "Please enter 10 digit mobile number prefixed by country code eg +911234567890",
        trigger: 'hover',
        delay: {show: 0, hide: 3000}
    });  
});

This will show your popover on hover on #number as well as add delay. See my updated jsFiddle as well. For a full description of the properties, visit the Bootstrap docs on popover .

Note that in the jsFiddle, it obscures part of the top of the popover. If the input is moved further down the page, the popover will display correctly.

Answer 3

Try to use trigger:'hover' like,

$(function () {
    $("#number").popover({
        title: 'Enter Mobile Number',
        content: "Please enter 10 digit mobile number prefixed by country code eg +911234567890",
        trigger:'hover'
    });
});

Read popover

Demo

Answer 4

Just select your element, then call popover with hover

<a data-toggle="popover" data-placement="right" data-content="Your Content">Mouse Over Here</a>

$("[data-toggle=popover]").popover({trigger:"hover"});