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="{:"data-original-title"=>"Quality", :rel=>"popover", :"data-content"=>"Did they do a good job? <ol><li> for Really Nice </li></ol>"}">Q</a>
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With