Crystal Crystal - 3 months ago 27
Javascript Question

using underscore template in bootstrap popover

I'm trying to put two column data in a bootstrap popover. I'd want it to look like something like this:

Name: crystal
Created On: 1/1/2000
Modified On: 1/31/2000
Owner: Bob


I want to have space between ":" so it's a two-column layout. This popover is shown in a kendo grid on hover over. I show a basic popover for that grid with:

$('a.hasPopover').popover({
placement: 'bottom',
content: '??????????????????',
template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-no-title"></h3><div class="popover-content"><p></p></div></div></div>'
});


In my template for this row, I originally had this just to see if my popover and data were connected:

Details

This does work. However, I'm not sure how (even if it's possible), to create a data-content template that would have divs for each of my columns and shove the data in. So I was wondering how I can use templates in either the content field where I have all those ????, or how to format my data-content properly to have two columns. Thanks in advance!

Answer

You can't use a template. You can set the html option to true and set your html in the data-content attribute, like:

<a class="hasPopover" rel="popover" data-content="<div class='span1'>test:</div><div class='span1'>longer text gives a problem?</div><br><div class='span1'>test:</div><div class='span1'>value</div><br>">POPOVER</a>

javascript:

$('a.hasPopover').popover({
                placement: 'bottom',
                html : 'true',
                template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-no-title"></h3><div class="popover-content"><p></p></div></div></div>'
            });

Id this don't work. Try the content option. You can use this as a function to manipulate your data-content attribute like:

            content : function(){ return $(this).attr('data-content').toUpperCase(); },