How do I get a radio element in a popover?

Question

I'm working on a dashbord site where data from the database is displayed in a table. One of the columns contains text from the database, if you click on that text you will get a popover.

The thing I want within this popover is the option to change the text with a radio element. The problem im having now is that whenever I am putting in html in the popover content, it shows the full HTML

HTML/PHP code:

$radio = '<div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
        <label class="form-check-label" for="exampleRadios1">
          Default radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
        <label class="form-check-label" for="exampleRadios2">
          Second default radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
        <label class="form-check-label" for="exampleRadios3">
          Disabled radio
        </label>
      </div>';
....

$output .= .....
<td><a tabindex='0' class='pointer' data-toggle='popover' data-trigger='' title='Dismissible popoverf' data-content='".$radio."'>".$status."</a></td>
...;

expected output: radio in popover-content actual output: html code in popover-content

I hope i've provided enough information, if not please let me know

Thanks in advance

Answer 1

Even tho it is a bad idea to inject the HTML like that, I am going to show you how to fix it, But please note that it is still a bad idea.

Change this part

<td><a tabindex='0' class='pointer' data-toggle='popover' data-trigger='' title='Dismissible popoverf' data-content='".$radio."'>".$status."</a></td>

to this:

<td><a tabindex='0' class='pointer' data-toggle='popover' data-trigger='' title='Dismissible popoverf' data-html="true" data-content='".$radio."'>".$status."</a></td>

Source:

Bootstrap Popovers