Problem
I can see a property called HTML: in the official docs.
Name | Type | default | Description
----------------------------------------------------------------------------
html | boolean | false | Insert html into the tooltip.
If false, jquery's text method
will be used to insert content
into the dom. Use text if you're
worried about XSS attacks.
The type is boolean, yet it states “put html into the tooltip.” In a Tooltip, how can I utilise complex html?
Asked by sergserg
Solution #1
This argument simply determines whether or not you will utilize complicated html in the tooltip. Set it to true and then type html into the tag’s title attribute.
As an example, I’ve set the html attribute to true in the a> tag using the data-html=”true” attribute, and then merely added the html ad hoc.
Answered by George Wilson
Solution #2
Another way to prevent html in the data-title is to build a separate div containing tooltip html content and refer to it when generating your tooltip:
<!-- Tooltip link -->
<p><span class="tip" data-tip="my-tip">Hello world</span></p>
<!-- Tooltip content -->
<div id="my-tip" class="tip-content hidden">
<h2>Tip title</h2>
<p>This is my tip content</p>
</div>
<script type="text/javascript">
$(document).ready(function () {
// Tooltips
$('.tip').each(function () {
$(this).tooltip(
{
html: true,
title: $('#' + $(this).data('tip')).html()
});
});
});
</script>
You can use this method to produce complicated, understandable HTML content while also enabling as many tooltips as you desire.
On Codepen, you may see a live demonstration.
Answered by migli
Solution #3
Just as normal, using data-original-title:
Html:
<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>
Javascript:
$("[rel=tooltip]").tooltip({html:true});
The html argument controls how the tooltip text is converted to DOM elements. To prevent XSS attacks, Html code is escaped by default in tooltips. Let’s say you have a username on your site and a tooltip with a brief bio. If the html code isn’t encoded and the user is able to edit the bio themselves, malicious code could be injected.
Answered by Matt Zeunert
Solution #4
In the documentation, the html data attribute does precisely what it states. Try this simple example (split into lines for clarity) that requires no JavaScript:
<span rel="tooltip"
data-toggle="tooltip"
data-html="true"
data-title="<table><tr><td style='color:red;'>complex</td><td>HTML</td></tr></table>"
>
hover over me to see HTML
</span>
JSFiddle demos:
Answered by davidkonrad
Solution #5
If you want html in your tooltip, set the “html” option to true. Option “title” determines the actual html (the title property of the link should not be set).
$('#example1').tooltip({placement: 'bottom', title: '<p class="testtooltip">par</p>', html: true});
Live sample
Answered by Andriy F.
Post is based on https://stackoverflow.com/questions/13704789/can-i-use-complex-html-with-twitter-bootstraps-tooltip