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?

Answer 1

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.