Can I use complex HTML with Twitter Bootstrap s Tooltip

Question

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

User · Accepted Answer

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.

User · Answer

Just as normal  using data-original-title   Html    lt div rel  tooltip  data-original-title   lt h1 gt big tooltip lt  h1 gt   gt Visible text lt  div gt    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

User · Answer

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     lt span rel  tooltip        data-toggle  tooltip        data-html  true        data-title   lt table gt  lt tr gt  lt td style  color red   gt complex lt  td gt  lt td gt HTML lt  td gt  lt  tr gt  lt  table gt    gt  hover over me to see HTML  lt  span gt     JSFiddle demos      Bootstrap 2 x Bootstrap 3 x

User · Answer

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     lt  -- Tooltip link -- gt   lt p gt  lt span class  tip  data-tip  my-tip  gt Hello world lt  span gt  lt  p gt    lt  -- Tooltip content -- gt   lt div id  my-tip  class  tip-content hidden  gt       lt h2 gt Tip title lt  h2 gt       lt p gt This is my tip content lt  p gt   lt  div gt    lt script type  text javascript  gt        document  ready function                 Tooltips             tip   each function                    this  tooltip                                html  true                  title            this  data  tip    html                                        lt  script gt    This way you can create complex readable html content  and activate as many tooltips as you want   live demo here on codepen

User · Answer

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    lt p class  testtooltip  gt par lt  p gt    html  true      Live sample

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

Examples related to javascript

Examples related to html

Examples related to twitter-bootstrap-3

Examples related to tooltip