Bootstrap tooltip with HTML in a string

Question

I am attempting to append a table to a div I've created. In this table I would like to add a bootstrap tool-tip with some HTML and css classes. When doing so my output always returns my HTML as the text display. I am having issues with trying to create the output I am looking for.

When adding HTML to the bootstrap tooltip are you able to do so in a string?

Here is an example of my code:

 $('[data-toggle="tooltip"]').tooltip()
 
 
 let html = ""
 
html += '<a data-toggle="tooltip" data-html="true" data-placement="left" title="<div class="row"><p>hello world</p></div>"> Test HTML </a >';

 $("#tooltipData").html(html);

.row {
  color:red;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div id='tooltipData'>
</div>

<br/> 
<br/>

<a data-toggle="tooltip" data-html="true" data-placement="left" title="<div class='row'>hello world</div>"> Test HTML </a >

The first div tooltipData is an example of the issues that I am having.

The second <a> data is an example of the tooltip working as expected, but I am unable to get that same result from the first example tooltipData.

My expected result is to append to the div and have the same output as <a data-toggle="tooltip" data-html="true" data-placement="left" title="<div class='row'><p>hello world</p> </div>" Test </a >

I am expecting to hover over the first "Test HTML" and have the tooltip read hello world as the second one.

John · Accepted Answer · 2020-12-02 02:44:04Z

1

Yeah you can do it using \' to quote the row. But you also must make sure $('[data-toggle="tooltip"]').tooltip() renders after your addition of the html code in js. See here:

let html = ""
 
html += '<a data-toggle="tooltip" data-html="true" data-placement="left" title="<div class=\'row\' >ok</div>"> Test HTML </a >';

 $("#tooltipData").html(html);
 
 $('[data-toggle="tooltip"]').tooltip()

.row {
  color:red;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div id='tooltipData'>
</div>



<a data-toggle="tooltip" data-html="true" data-placement="left" title="<div class='row'>ok</div>"> Test HTML </a >

answered Dec 2, 2020 at 2:44

John

5,3621 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bootstrap tooltip with HTML in a string

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related