Geek asks and answers

Twitter Bootstrap, show all popovers in one div

I tried to get the following use of Twitter Bootstrap 2.0 and its popover-plugin, but after a few hours I still can not understand.

Let's say in the lower left corner of my page I got an image with a bird. This bird should "speak" every popper, for example, for registration form, should appear on top of the bird. Is it possible?

For a better understanding, I created a test site here . If you hover over registration fields, there are popovers. I want them to appear above the bird’s img in the lower left corner, but I don’t know how to achieve this. It would be great if you could help me.

+5
source share
1 answer

Method 1:

The jQuery hover handler accepts the in and out methods, and in your example, you only assign the in method to show a popup. This is normal, but instead of attaching it to "this", you should attach it to your image of a bird. Remember to also change the pop-up trigger to a guide. Then, in the "drop down" hover method, you just need to hide the popup.

$('#registerHere input').hover(function()
{
    $('#birdie').popover({
            "trigger": 'manual',
            "placement":'top',
                }).popover('show');
},
function()
{
    $('#birdie').popover('hide');
});

Method 2:

Alternatively, save what you have, but use the provided “selector” option and give it the image of your bird as a parameter, this should cause a pop-up window from your control, but delegate it to your image of your bird.

Selector

: , .

$('#registerHere input').hover(function()
{
    $('#birdie').popover({
            "selector": "#birdie",
            "placement":'top',
                }).popover('show');
});

EDIT: . , - - , .

+7

More articles:


All Articles