Search code examples
javascriptjquerycsswebpopover

Popover Bootstrap - How to make it cleaner

I am trying to figure out different ways of building a popover without having to declare all of it's attributes in the tag. Is it possible to group it in a class, or declare it within .popover()?

For example, is it possible to change 

<a href="#" id="example" class="btn btn-primary" rel="popover"
data-content="This is the body of Popover"
data-original-title="Creativity Tuts">pop
</a>

$(function () {
    $('#example').popover();
});

to something cleaner like this

<a href="#" id="cleaner" class="btn btn-primary">pop2</a>

$(function () {
    $('cleaner').popover({
        //where I would rather declare rel="popover", 
        //data-content="This is the body of Popover" and so on.
    });
});

Here's my jsfiddle.

Thank you in advance.

Solution

  • Yes, it is possible, here you are:

    $(function () {
    $('#cleaner').popover({
        content : "This is the body of popover",
        title : "Creativity Tuts",
    });
});