With bootstrap popovers, you are able to control when to hide and show them on any element

<span id="span">Click me</span>

<script>
$('#span').click(function(){
    $(this).popover({
        title: 'some title',
        content: 'nice popover',
        trigger: 'manual',
        placement:'top',
        html: true
    }).popover('show');
    clickedAway = false
    isVisible = true
});
$(document).click(function() {
    if(isVisible & clickedAway){
        $('#span').popover('hide')
    isVisible = clickedAway = false
    }else{
    clickedAway = true
    }
});
</script>

How can I acplish the same with bootstrap tooltips? The difference with popovers and tooltips seems to be that tooltips are initiated on DOM load and popovers can be initiated manually from an event listener.

With bootstrap popovers, you are able to control when to hide and show them on any element

<span id="span">Click me</span>

<script>
$('#span').click(function(){
    $(this).popover({
        title: 'some title',
        content: 'nice popover',
        trigger: 'manual',
        placement:'top',
        html: true
    }).popover('show');
    clickedAway = false
    isVisible = true
});
$(document).click(function() {
    if(isVisible & clickedAway){
        $('#span').popover('hide')
    isVisible = clickedAway = false
    }else{
    clickedAway = true
    }
});
</script>

How can I acplish the same with bootstrap tooltips? The difference with popovers and tooltips seems to be that tooltips are initiated on DOM load and popovers can be initiated manually from an event listener.

• javascript
• html
• twitter-bootstrap

1 Answer 1

As I understand it you can call:

$('#id').tooltip({
    ...config...
});

$('#id').tooltip('show');

At any point?