Bootstrap custom popover

Question

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

Answer 1

I dont think the links in the comments completely 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="comments" title="Enter comments">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=comments]").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 comment-popover
    $("[rel=comments]").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.net/e4zMu/ here with three editable links / elements :