Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I use html tags in twitter-bootstrap popover data-content?

I'm using Twitter-Bootstrap within a Rails 3.1.3 application. I have numerous elements with popovers like:

<a data-original-title="Quality" rel="popover" data-content="Did they do a good job?  5 for Really Nice, 4 for Good Enough, 3 for Average, 2 for Somewhat OK, 1 for Really Bad">Q</a> 

I'd like to have an ordered list in the content section similar to:

<OL reversed="reversed">   <LI> for Really Nice </LI>   <LI> for Good Enough </LI>   ... </OL> 

Is there a simple way to do this without modifying the JavaScript? Whatever I try, the html code is displayed on the browser instead of being interpreted as such.

UPDATE

Using the following code per David's suggestion

link_to 'Q', '#', options: { data-original-title: "Quality", rel: 'popover', data-content: "Did they do a good job? <ol><li> for Really Nice </li><li>...</li></ol>".html_safe } 

generates a syntax error with my setup. I think this explains why: Ruby 1.9 hash with a dash in a key . So I'm using:

<%= link_to 'Q', '#', options: { :"data-original-title" => "Quality", :rel => 'popover', :"data-content" => "Did they do a good job? <ol><li> for Really Nice </li></ol>".html_safe } %> 

This doesn't work. It generates the following HTML:

<a href="#" options="{:&quot;data-original-title&quot;=&gt;&quot;Quality&quot;, :rel=&gt;&quot;popover&quot;, :&quot;data-content&quot;=&gt;&quot;Did they do a good job? &lt;ol&gt;&lt;li&gt; for Really Nice &lt;/li&gt;&lt;/ol&gt;&quot;}">Q</a> 
like image 969
Arman Avatar asked Dec 13 '11 18:12

Arman


People also ask

How do I display popover in HTML?

How To Create a Popover. To create a popover, add the data-toggle="popover" attribute to an element. Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.

How do I customize bootstrap popover?

To create a popover, you need to add the data-bs-toggle="popover" attribute to an element. Whereas, popover's title and its content that would display upon trigger or activation can be specified using the title and data-bs-content attribute respectively. Here is the standard markup for adding a popover to a button.

What is the difference between Tooltip and popover?

Tooltip: use tooltips to show a short text to respondents when they hover over a word or icon. Popover: use popovers to show a longer text, or when you want to have a link to an external web page. It is shown when the respondent clicks on a word or icon.


1 Answers

You need to create a popover instance that has the html option enabled (place this in your javascript file after the popover JS code):

$('.popover-with-html').popover({ html : true }); 

Then the link syntax would be:

<%= link_to('Q', '#', :class => "popover-with-html", :title => "Quality", "data-content" => "#{some_content_object.html_safe}") %> 

If you're dynamically generating the content, then you need to use html_safe like David suggested so Rails doesn't escape the HTML code. Otherwise, you can just place HTML directly within that content attribute.

like image 116
iwasrobbed Avatar answered Sep 22 '22 23:09

iwasrobbed