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_safeand 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' %>" >