CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapweb
kelgwiin
kelgwiin

Reputation: 817

Custom popover menu twitter-bootstrap over tooltip and show when click on button

Html file:

<a
id="popoverMenu"
data-toggle="popover" data-placement="bottom" 
data-title = "Some title"
data-container="body"
data-html = "true" 
data-content=' 
    <!-- row 1-->
    <div class = "row">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "some.url.com" type="button" class="btn btn-default">button1</a>
        </div>

        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "some.url.com" type="button" class="btn btn-default">button2</a>
        </div>

        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "some.url.com" type="button" class="btn btn-default">button3</a>
        </div>
    </div>

    <!-- row 2-->
    <div class = "row">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "some.url.com" type="button" class="btn btn-default">button1</a>
        </div>

        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "some.url.com" type="button" class="btn btn-default">button2</a>
        </div>

        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "some.url.com" type="button" class="btn btn-default">button3</a>
        </div>
    </div>
    ...
    <!-- row n-->
    <div class = "row">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "some.url.com" type="button" class="btn btn-default">button1</a>
        </div>

        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "some.url.com" type="button" class="btn btn-default">button2</a>
        </div>

        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "some.url.com" type="button" class="btn btn-default">button3</a>
        </div>
    </div>
'
</a>

data-html: Allow you write html in the data-content.

If you want a custom width popover, you may download the custom framework bootstrap in the section "Customize" and set the width of your preference: Popovers->@popover-max-width

JS file

$(document).ready(function(){
    //Create the instance of popover
    $('#popoverMenu').popover();

    //Create the instance of tooltips
    $('[data-toggle=tooltip]').tooltip();
});

Upvotes: 0

Views: 4134

Answers (1)

Suganth G
Suganth G

Reputation: 5156

If you need your popover to be Customized design means use this:

$('#popoverMenu').popover({ template: 'Your HTML Design with `class="popover-title"` and `class="popover-content"`'});

popover-title: This tag will hold your title which is given in title attribute

popover-content: This tag will hold your content which is given in data-content attribute

REFERENCE LINK

Upvotes: 1

Related Questions