Is it possible to have a custom bootstrap popover?

I mean I want to be able to use

$('#example').popover(options)

So on click of an element #example, I'll pass some text (which would be shown in editable textarea);

I am using bootstrap 2.3.2

Is it possible to have a custom bootstrap popover?

I mean I want to be able to use

$('#example').popover(options)

So on click of an element #example, I'll pass some text (which would be shown in editable textarea);

I am using bootstrap 2.3.2

• javascript
• jquery
• twitter-bootstrap
• popover

• 1 Have you tried anything yet? These questions should solve your problem: HTML inside Twitter Bootstrap popover and Contain form within a bootstrap popover?. – Joe Commented Jun 20, 2014 at 11:06
• Try using a modal for the popover - something like this maybe bootsnipp./snippets/featured/contact-and-vote-modal (click on "contact button") – Tom Rudge Commented Jun 20, 2014 at 11:26

2 Answers 2

I dont think the links in the ments pletely answers the question. Here is a 2.3.2 example, working with multiple links / elements, that passes text() from the element to a textarea on the popover, and back to the element upon "submit" :

<a href="#" rel="ments" title="Enter ments">awesome user</a>

Use popovers template feature to customize the popover (adding buttons), set a <textarea> as content, inject the text of the link / element to the textarea on the shown event :

$("[rel=ments]").popover({
    trigger : 'click',  
    placement : 'top', 
    html: 'true', 
    content : '<textarea class="popover-textarea"></textarea>',
    template: '<div class="popover"><div class="arrow"></div>'+
              '<h3 class="popover-title"></h3><div class="popover-content">'+
              '</div><div class="popover-footer"><button type="button" class="btn btn-primary popover-submit">'+
              '<i class="icon-ok icon-white"></i></button>&nbsp;'+
              '<button type="button" class="btn btn-default popover-cancel">'+
              '<i class="icon-remove"></i></button></div></div>' 
})
.on('shown', function() {
    //hide any visible ment-popover
    $("[rel=ments]").not(this).popover('hide');
    var $this = $(this);
    //attach link text
    $('.popover-textarea').val($this.text()).focus();
    //close on cancel
    $('.popover-cancel').click(function() {
        $this.popover('hide');
    });
    //update link text on submit
    $('.popover-submit').click(function() {
        $this.text($('.popover-textarea').val());
        $this.popover('hide');
    });
});

see fiddle -> http://jsfiddle/e4zMu/ here with three editable links / elements :

In the event you want to use RAZOR or HTML actually be used as the template for the popover (rather than injecting it through the attribute in JS):

In the following example, we were building a bootstrap Breadcrumb control with a popover that contained a list of values that might be selected to change the value of a breadcrumb.

we were using razor to create the HTML TEMLPLATE for the popover-content.

This is how the popover used HTML for its 'content':

<script type='text/javascript'>
    $(function () {
        $('a[data-toggle="popover"]').popover({
            html: true,
            content: function () {
                return $($(this).data('contentwrapper')).html();
            }
        });
    });
</script>

What this did was for the content attribute, we used jquery to search for a data-contentwrapper within this breadcrumb.

We used Razor to create each breadcrumb element (using orderlist / listitem) and a div containing the proper id to be used in our data-toggle.

<ol class="breadcrumb">
    @foreach (var segment in Model.Segments)
    {
        var selectedChild = segment.SelectedChild;
        var popoverId = segment.Id + "_breadcrumb_popover";
        var longCaption = segment.Caption;
        var shortCaption = segment.Id;
        var childType = segment.ChildType;
        if (segment.SelectedChild != null)
        {
            shortCaption = segment.SelectedChild.Id;
        }
        else
        {
            // if the selected child is null, then we want the text to show 'select ' _grandchildType is
            shortCaption = string.Format("Select {0} ?", segment.ChildType);
        }
        var listItemClassString = (segment.Children.Any()) ? "" : "hidden";

        <!-- THIS IS THE BREADCRUMB ELEMENT -->
        <li class="@listItemClassString">
            <small>@childType</small>
            <a href="javascript: void(0)" tabindex="0" rel="popover" data-container="body"
           data-html="true" data-toggle="popover" data-placement="bottom"
           data-animation="true" data-trigger="focus" title="Choose @childType" data-contentwrapper="#@popoverId" >@shortCaption</a>
            <i class="glyphicon glyphicon-chevron-right"></i>

        </li>


        <!-- THIS IS THE TEMPLATE DROPDOWNLIST FOR THe above list item -->
        <div role="tooltip" title="FROM TEMPLATE" class="popover breadcrumb hidden" id="@popoverId">
            <div class="arrow"></div>
            @*<h3 class="popover-title"></h3>*@
            <div class="popover-content" class='panel clearfix hidden' style='padding-right: 10px;'>
                <ul class="list-group">
                    @foreach (var option in segment.Children)
                    {

                        <li class="list-group-item">
                            @{
                        var url = new UrlHelper(ViewContext.RequestContext, RouteTable.Routes).RouteUrl("DefaultWithBreadcrumb",
                            new
                            {
                                action = parentRouteData.Values["action"] as String,
                                controller = parentRouteData.Values["controller"] as String,
                                breadcrumbPath = option.Url
                            });
                            }
                            <a href="@url" style="font-size:.9em;">@option.Caption</a>
                        </li>
                        <!-- class='col-md-3 col-sm-4'-->
                    }
                    @{ tabIndex++;}
                </ul>
            </div>
        </div>
    }
</ol>

Hope this helps someone who would like to bine serverside MVC with clientside bootstrap popover html content.