Rendering partial in bootstrap popover rails 5 app?

Question

I'm having a problem rendering a partial in a bootstrap popover in my rails app.

The partial is always rendered as a plain text( showing all the HTML tags etc).

this is the code from the index.html.erb

<span class="has-popover"
      style="cursor:pointer;"
      data-toggle="popover"
      data-trigger="hover"
      data-container="body"
      data-placement="right"
      title="Lorem Ipsum"
      data-content= "<%= render :partial => 'envs/e1' %>" >
      <i class="fa fa-question-circle "  aria-hidden="true"></i>
</span>

In the app.js I have this snippet

$(".has-popover").popover({
    html : true
});

and this is the _e1.html.erb partial in the envs folder

<h2>Mauris euismod sollicitudin?</h2>

<p>Morbi sit amet tellus pellentesque, maximus eros a, aliquam nunc. Vivamus velit velit, vestibulum at eros eu, iaculis hendrerit tortor. Morbi ullamcorper purus at ornare ullamcorper. </p>

<br>

<p>Morbi sit amet tellus pellentesque, maximus eros a, aliquam nunc. Vivamus velit velit, vestibulum at eros eu, iaculis hendrerit tortor. Morbi ullamcorper purus at ornare ullamcorper. </p>

I have wrapped "<%= render :partial => 'envs/e1' %>" this line in both raw() and html_safe without any luck.

* ADDED EXAMPLES * below are examples on how I've been using html_safe and raw in the snipped

data-content= raw("<%= render :partial => 'envs/e1' %>") - text appears the "right" way but outsite the popover.

data-content= "<%= raw(render :partial => 'envs/e1') %>" > - text appears as plain-text

data-content= "<%= render :partial => raw('envs/e1') %>" > - text appears as plain-text

data-content= "<%= render :partial => 'envs/e1' %>".html_safe - text appears as plain-text

data-content= "<%= render :partial => 'envs/e1'.html_safe %>" - text appears as plain-text

there must be some way to have the partial styled inside the popover?? Or am I doing this all wrong?

please advise me thanks in advance.

Answer 1

I believe that you have to enable data-html = "true" in your popover span. At least it worked at my machine.

So it would be written like:

<span class="has-popover"
  style="cursor:pointer;"
  data-toggle="popover"
  data-trigger="hover"
  data-html="true" <!-- This is what you have to add to the code -->
  data-container="body"
  data-placement="right"
  title="Lorem Ipsum"
  data-content= "<%= render :partial => 'envs/e1' %>" >

Answer 2

By default, Bootstrap popovers don't accept html entered into them by automatically inheriting the option: data-html="false" you need to add and change it to true .

If you want to read more about what options you can pass through to bootstrap popovers, check out this section of their API and you can review what you can potentially do with it.

Answer 3

Your Bootstrap markup and JS look fine, so the issue is almost certainly that your view is outputting escaped HTML rather than the markup that you need.

Your attempts with html_safe are very close and definitely on the right track, but the lack of brackets means that it's not quite doing what you think. Try this instead:

data-content="<%= render(partial: 'envs/e1').html_safe %>"

Note that the html_safe is applied to the output of render , and the outer quotes are retained in the HTML and not interpreted by Rails.