bootstrap tooltip is not working on button tag

Question

Update

The fiddle example is working, my bad. However it's not working on my test website, and I made a quick example on my website.

[Link][1]

Typing 'medicine' and press button 'go'. If you hover over the button on the top-right corner, tooltip seems not working, but the 'add' a tag works.

This is my javascript code:

    $("body").tooltip({
    placement: 'top',
    selector: 'button.resize',
    trigger: 'hover',
    title: 'message'
});

Here is an example of my code: Link.

I made a tooltip for an a tag, which works. However, I did the exactly same thing to an button and the code seems broken. I have spent several hours on this issue, but still no cure.

P.S. The button is generated dynamically in my application, so I used selector.

Answer 1

It does work for the first button as well, but since the placement is set to top you don't see it because it's being rendered outside the viewport. Try this:

$("body").tooltip({
    placement: 'right',
    selector: 'button.resize',
    trigger: 'hover',
    title: 'message'
});

See Fiddle

Update (as per your comment):

The problem is that you're calling $('body').tooltip() twice. You can either try:

//add definition tooltip
$("body").tooltip({
    placement: 'right',
    selector: 'a.add',
    trigger: 'hover',
    title: posts.addDefinition
});

//resize tooltip
$("html").tooltip({
    placement: 'top',
    selector: 'button.resize',
    trigger: 'hover',
    title: 'message'
});

Or expand the selector to include both, and use a function to determine the title:

$("body").tooltip({
    placement: 'right',
    selector: 'a.add, button.resize',
    trigger: 'hover',
    title: function() {
        return this.title; // insert your custom logic here
    }
});