bootstrap tooltip not working on mouse hover

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 [phone]"
    });  
});

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="[phone]" 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 [phone]",
        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 [phone]",
        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"});