CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap-3tooltip
sergserg
sergserg

Reputation: 22224

Can I use complex HTML with Twitter Bootstrap's Tooltip?

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?

Upvotes: 157

Views: 216061

Answers (8)

George Wilson
George Wilson

Reputation: 5705

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.

In bootstrap 5, the attribute has been renamed to data-bs-html.

Upvotes: 283

Sentary
Sentary

Reputation: 2016

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;");
}

Upvotes: 0

Muhammad Talha
Muhammad Talha

Reputation: 41

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

Upvotes: 1

ivenpoker
ivenpoker

Reputation: 79

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!
     })
});

Upvotes: 1

davidkonrad
davidkonrad

Reputation: 85518

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:

Upvotes: 30

migli
migli

Reputation: 3252

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

Upvotes: 45

Andriy F.
Andriy F.

Reputation: 2537

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

Upvotes: 8

Matt Zeunert
Matt Zeunert

Reputation: 16561

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.

Upvotes: 37

Related Questions