Coder Perfect

Is it possible to utilize sophisticated HTML in a Twitter Bootstrap Tooltip?


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>

<script type="text/javascript">
    $(document).ready(function () {
        // Tooltips
        $('.tip').each(function () {
                html: true,
                title: $('#' + $(this).data('tip')).html()

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:


<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>



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-title="<table><tr><td style='color:red;'>complex</td><td>HTML</td></tr></table>"
hover over me to see HTML

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