154

If I check official documentation, I can see a property called HTML:

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.

It says, "insert html into the tooltip", but the type is boolean. How can I use complex html inside a Tooltip?

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
sergserg
  • 21,716
  • 41
  • 129
  • 182

8 Answers8

277

This parameter is just about whether you are going to use complex html into the tooltip. Set it to true and then hit the html into the title attribute of the tag.

See this fiddle here - I've set the html attribute to true through the data-html="true" in the <a> tag and then just added in the html ad hoc as an example.

George Wilson
  • 5,595
  • 5
  • 29
  • 42
  • 4
    Well their documentation isn't so clear on that area. Thanks for sharing this answer! :) – sergserg Dec 04 '12 at 14:45
  • 3
    The bootstrap documentation is notoriously rubbish :) Glad I could clear things up! – George Wilson Dec 04 '12 at 14:46
  • 7
    The fiddle example doesn't work for me. I still see the raw HTML code. – Sonson123 Feb 12 '13 at 07:28
  • Your quite right - for some reason it doesn't seem to be working anymore :/ I'm really snowed under with work at the moment - but I'll try and look into it this week and update it - bootstrap's has upgraded to 2.3.0 since I wrote this so their might have been changes! – George Wilson Feb 12 '13 at 09:26
  • Despite not changing it the fiddle appears to work again. Odd one - perhaps a fiddle error rather than my code error?? – George Wilson Mar 11 '13 at 14:58
  • There's nothing in the changelog about it - but also could be due to bootstrap having the 2.3.1 update? – George Wilson Mar 11 '13 at 15:03
  • 3
    Probably some change to Bootstrap code like you suspect. Before I had all my tooltips wired for html titles using {html: true} in the function attributes, but going from 2.2.2 > 2.3.1, I had to add data-html="true" to my elements and just scrapped the {html: true} part. I really wish they would try to get things right more often the first time and not inflict breaking changes constantly between releases. – Andrew Swihart Mar 29 '13 at 19:41
  • I think the reason it doesn't work is jsFiddler doesn't like external files coming from github...or non CDN's – ptutt Aug 13 '13 at 23:01
  • 1
    See here: http://jsfiddle.net/44khF/148/. Also, it only seems to work with the the data attribute and not using html: true in the initialisation if delegates are used. – ptutt Aug 13 '13 at 23:11
45

Another solution to avoid inserting html into data-title is to create independant div with tooltip html content, and refer to this div when creating 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>

This way you can create complex readable html content, and activate as many tooltips as you want.

live demo here on codepen

migli
  • 2,692
  • 27
  • 32
  • 2
    Fantastic. I'm so glad someone proposed a solution that isn't cramming HTML directly into the data property. – Mir Feb 11 '19 at 21:45
  • Works well in Bootstrap 4.5. Weird that this isn't documented anywhere. – png Dec 01 '20 at 19:59
37

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 parameter specifies how the tooltip text should be turned into DOM elements. By default Html code is escaped in tooltips to prevent XSS attacks. Say you display a username on your site and you show a small bio in a tooltip. If the html code isn't escaped and the user can edit the bio themselves they could inject malicious code.

Matt Zeunert
  • 16,075
  • 6
  • 52
  • 78
  • 6
    `data-original-title` is where bootstrap temporarily store `title` if it is present. `data-title` is enough if you not have a title, like a `` – davidkonrad Mar 25 '14 at 20:59
  • Hello @MattZeunert I have used it and running perfectly fine but I want to update the title as per my coming data without reloading the page and set dynamically, I mean changing the content inside the title. – 3 rules Sep 24 '16 at 06:45
30

The html data attribute does exactly what it says it does in the docs. Try this little example, no JavaScript necessary (broken into lines for clarification):

<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:

informatik01
  • 16,038
  • 10
  • 74
  • 104
davidkonrad
  • 83,997
  • 17
  • 205
  • 265
8

set "html" option to true if you want to have html into tooltip. Actual html is determined by option "title" (link's title attribute shouldn't be set)

$('#example1').tooltip({placement: 'bottom', title: '<p class="testtooltip">par</p>', html: true});

Live sample

Andriy F.
  • 2,467
  • 1
  • 25
  • 23
1

For bootstrap 5, you can use data-bs-html="true" with the title tag data-bs-original-title="Tooltip Title"

Muhammad Talha
  • 41
  • 2
0

As of bootstrap 5, you can just specify the contents of the tooltip to be html DOM nodes when configuring it. Sample config...

// setup tools tips trigger
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
     return new Tooltip(tooltipTriggerEl, {
           html: true // <- this should do the trick!
     })
});
ivenpoker
  • 69
  • 7
  • I really want to use this method, but I don't understand at all what you're saying. Can you provide the example HTML? – Bobort Jan 13 '22 at 15:38
0

Had the same problem in tooltips with escaped characters in the text, resolved it by using a custom attribute for text content and escaping characters before enabling the tooltip:

In JSP/HTML

<a id="myTooltip" href="#"
    class="country-list-trigger" data-toggle="tooltip" data-alternative-title="Text with "escaped characters" ==> this should be displayed ==>  "as it is""
    data-html="true" title=""> 
        <i class="fa fa-info-circle fa-2"></i>
</a>

In Javascript

$(document).ready(function() {
    enableAllTooltips();
} );

// enable tooltip after getting the title from the custom attribute (does not work when using the default attribute: data-original-title)
function enableAllTooltips() {
  $('[data-toggle="tooltip"]').tooltip({
      template: '<div class="tooltip tooltip-custom"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
      title: function() {
        return escapeHtml(this.getAttribute('data-alternative-title'));
      }
  })
}


// Custom method for replacing escaped characters by there character entities 
function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
}
Shessuky
  • 1,846
  • 21
  • 24