Trigger bootstrap tooltip options via javascript

Question

Pls what is the right way to pass options via javascript for bootstrap tooltip/popover: Via data attributes works as in:

<input type="text" data-toggle="tooltip" data-placement="right" data-animation="fade" data-delay="200" data-trigger="focus" data-content="foo">

But using javascript this doesn't:

<script>
    jQuery(function ($) {
        $("input").popover()({
            animation:"fade",
            delay: "200",
            trigger:"focus",
            placement: "right"
        });
    });
</script>

what is the right syntax?

The Alpha · Accepted Answer · 2014-06-01 22:52:39Z

5

For tooltip, it should be:

jQuery(function ($) {
    $("input").tooltip({...});
});

Instead of:

jQuery(function ($) {
    $("input").popover({...});
});

Update: Sorry for the mis-confusions, it works here but:

popover()({...});

Should be

popover({...});

HTML:

<input type="text" data-toggle="tooltip" data-placement="right" data-animation="fade" data-delay="200" data-trigger="focus" data-content="foo">

JS:

jQuery(function ($) {
    $("input").popover({
        animation:"fade",
        delay: "200",
        trigger:"focus",
        placement: "right"
    });
});

Make sure you have added the JavaScript and CSS files properly.

edited Jun 1, 2014 at 22:52

answered Jun 1, 2014 at 22:31

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ss_millionaire Over a year ago

I want use a popover. Note: The $("input").popover() works when i pass options via data attributes as in the first example and so does$("input").tooltip(). Both don't work via javascript

jme11 Over a year ago

That's because you're just initializing the popover with it's options (or like above without any options). To call the popover and cause it to display you need to use $('input').popover('show');

nh-labs Over a year ago

little errors in value definition: $("input").popover({ animation:true, delay: 200, trigger:"focus", placement: "right" });

Cristofor · Accepted Answer · 2014-06-01 22:35:03Z

3

Reveals an element's tooltip.

$('#element').tooltip('show')

Hides an element's tooltip.

$('#element').tooltip('hide')

Toggles an element's tooltip.

$('#element').tooltip('toggle')

Hides and destroys an element's tooltip.

$('#element').tooltip('destroy')

Complete reference: Here

answered Jun 1, 2014 at 22:35

Cristofor

2,0972 gold badges16 silver badges23 bronze badges

Collectives™ on Stack Overflow

Trigger bootstrap tooltip options via javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related