Jquery UI tooltip does not support html content

Question

Today  I upgraded all of my jQuery plugs-in with jQuery 1 9 1  And I started to use jQueryUI tooltip with jquery ui 1 10 2  Everything was good  But when I used HTML tags in the content  in the title attribute of the element I was applying the tooltip to   I noticed that HTML is not supported   This is screenshot of my tooltip     How can I make HTML content work with jQueryUI tooltip in 1 10 2

User · Answer

You can also achieve this completely without jQueryUI by using CSS styles. See the snippet below:

_x000D_

div#Tooltip_Text_container {_x000D_
  max-width: 25em;_x000D_
  height: auto;_x000D_
  display: inline;_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
div#Tooltip_Text_container a {_x000D_
  text-decoration: none;_x000D_
  color: black;_x000D_
  cursor: default;_x000D_
  font-weight: normal;_x000D_
}_x000D_
_x000D_
div#Tooltip_Text_container a span.tooltips {_x000D_
  visibility: hidden;_x000D_
  opacity: 0;_x000D_
  transition: visibility 0s linear 0.2s, opacity 0.2s linear;_x000D_
  position: absolute;_x000D_
  left: 10px;_x000D_
  top: 18px;_x000D_
  width: 30em;_x000D_
  border: 1px solid #404040;_x000D_
  padding: 0.2em 0.5em;_x000D_
  cursor: default;_x000D_
  line-height: 140%;_x000D_
  font-size: 12px;_x000D_
  font-family: 'Segoe UI';_x000D_
  -moz-border-radius: 3px;_x000D_
  -webkit-border-radius: 3px;_x000D_
  border-radius: 3px;_x000D_
  -moz-box-shadow: 7px 7px 5px -5px #666;_x000D_
  -webkit-box-shadow: 7px 7px 5px -5px #666;_x000D_
  box-shadow: 7px 7px 5px -5px #666;_x000D_
  background: #E4E5F0  repeat-x;_x000D_
}_x000D_
_x000D_
div#Tooltip_Text_container:hover a span.tooltips {_x000D_
  visibility: visible;_x000D_
  opacity: 1;_x000D_
  transition-delay: 0.2s;_x000D_
}_x000D_
_x000D_
div#Tooltip_Text_container img {_x000D_
  left: -10px;_x000D_
}_x000D_
_x000D_
div#Tooltip_Text_container:hover a span.tooltips {_x000D_
  visibility: visible;_x000D_
  opacity: 1;_x000D_
  transition-delay: 0.2s;_x000D_
}

_x000D_

<div id="Tooltip_Text_container">_x000D_
  <span><b>Tooltip headline</b></span>_x000D_
  <a href="#">_x000D_
    <span class="tooltips">_x000D_
        <b>This is&nbsp;</b> a tooltip<br/>_x000D_
        <b>This is&nbsp;</b> another tooltip<br/>_x000D_
    </span>_x000D_
  </a>_x000D_
  <br/>Move the mousepointer to the tooltip headline above. _x000D_
</div>

_x000D_

The first span is for the displayed text, the second span for the hidden text, which is shown when you hover over it.

User · Answer

another solution will be to grab the text inside the title tag  amp  then use  html   method of jQuery to construct the content of the tooltip     function         document  tooltip       position          using  function position  feedback              this  css position           var txt     this  text              this  html txt               lt div gt               addClass  arrow              addClass feedback vertical             addClass feedback horizontal             appendTo this                             Example  http   jsfiddle net hamzeen 0qwxfgjo

User · Answer

Html Markup  Tool-tip Control with class   why   and Tool-tip Content Area with class   customTolltip     function                          why   attr  title   function                          return   this  next   customTolltip   remove   html                                          document  tooltip

User · Answer

I solved it with a custom data tag  because a title attribute is required anyway       data-tooltip    each function i  e        var tag     e       if  tag is   title        false            tag attr  title                     document  tooltip       items    data-tooltip        content  function              return   this  attr  data-tooltip                Like this it is html conform and the tooltips are only shown for wanted tags

User · Answer

From http   bugs jqueryui com ticket 9019     Putting HTML within the title attribute is not valid HTML and we are   now escaping it to prevent XSS vulnerabilities  see  8861        If you need HTML in your tooltips use the content option -    http   api jqueryui com tooltip  option-content    Try to use javascript to set html tooltips  see below       selector    tooltip      content   Here is your HTML

User · Answer

To expand on  Andrew Whitaker s answer above  you can convert your tooltip to html entities within the title tag so as to avoid putting raw html directly in your attributes    x000D   x000D     div   tooltip   x000D      content  function      x000D          return   this  prop  title    x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 8 3 jquery min js  gt  lt  script gt  x000D   lt script src  http   code jquery com ui 1 9 2 jquery-ui js  gt  lt  script gt  x000D   lt div class  tooltip  title   amp lt div amp gt check out these kool  amp lt i amp gt italics amp lt  i amp gt  and this  amp lt span style  amp quot color red amp quot  amp gt red text amp lt  span amp gt  amp lt  div amp gt   gt Hover Here lt  div gt  x000D   x000D   x000D    More often than not  the tooltip is stored in a php variable anyway so you d only need    lt div title   lt  php echo htmlentities  tooltip     gt   gt Hover Here lt  div gt

User · Answer

You may modify the source code  jquery-ui js    find this default function  for retrieving target element s title attribute content   var tooltip     widget   ui tooltip     version   1 11 4   options        content  function                support  IE lt 9  Opera in jQuery  lt 1 7             text   can t accept undefined  so coerce to a string         var title      this   attr   title                      Escape title  since we re going from an attribute to raw HTML         return      lt a gt     text  title   html             change it to   var tooltip     widget   ui tooltip     version   1 11 4   options        content  function                support  IE lt 9  Opera in jQuery  lt 1 7             text   can t accept undefined  so coerce to a string         if   this  attr  ignoreHtml      false                return   this  prop  title                      var title      this   attr   title                      Escape title  since we re going from an attribute to raw HTML         return      lt a gt     text  title   html             thus whenever you want to display html tips   just add an attribute ignoreHtml  false  on your target html element  like this   lt td title   lt b gt display content lt  b gt  lt br  gt other  ignoreHtml  false  gt display       content lt  td gt

User · Answer

Replacing the  n or the escaped  lt br  gt  does the trick while keeping the rest of the HTML escaped    document  tooltip       content  function             var title     this  attr  quot title quot       quot  quot           return    quot  lt a gt  quot   text title  html   replace   amp lt br      amp gt     quot  lt br  gt  quot

User · Answer

To avoid placing HTML tags in the title attribute  another solution is to use markdown  For instance  you could use  br  to represent a line break  then perform a simple replace in the content function   In title attribute    Sample Line 1 br  br Sample Line 2    In your content function   content  function          return   this  attr  title   replace    br   g   lt br   gt

User · Answer

Instead of this     document  tooltip       content  function              return   this  prop  title                use this for better performance    selector  tooltip       content  function              return this getAttribute  title

User · Answer

function                 widget  ui tooltip     ui tooltip                 options                     content  function                           return   this  prop  title                                                                 rel tooltip    tooltip                position                     my   center bottom-20                    at   center top                    using  function  position  feedback                           this  css position                            lt div gt                              addClass  arrow                             addClass feedback vertical                            addClass feedback horizontal                            appendTo this                                                             thanks for post and solution above   I have updated the code little bit  Hope this might help you   http   jsfiddle net pragneshkaria Qv6L2 49

User · Answer

None of the solutions above worked for me  This one works for me     document  ready function            body   tooltip           selector    data-toggle  tooltip             html  true

User · Answer

Edit  Since this turned out to be a popular answer  I m adding the disclaimer that  crush mentioned in a comment below  If you use this work around  be aware that you re opening yourself up for an XSS vulnerability  Only use this solution if you know what you re doing and can be certain of the HTML content in the attribute     The easiest way to do this is to supply a function to the content option that overrides the default behavior     function              document  tooltip             content  function                    return   this  prop  title                                  Example  http   jsfiddle net Aa5nK 12   Another option would be to override the tooltip widget with your own that changes the content option     widget  ui tooltip     ui tooltip        options            content  function                  return   this  prop  title                          Now  every time you call  tooltip  HTML content will be returned   Example  http   jsfiddle net Aa5nK 14

User · Answer

add html   true to the tooltip options     selector   tooltip  html  true      Update it s not relevant for jQuery ui tooltip property - it s true in bootstrap ui tooltip - my bad

User · Answer

As long as we re using jQuery    v1 8   we can parse the incoming string with   parseHTML         tooltip   tooltip       content  function              var tooltipContent       lt div   gt    html    parseHTML    this  attr  title                return tooltipContent                We ll parse the incoming string s attribute for unpleasant things  then convert it back to jQuery-readable HTML  The beauty of this is that by the time it hits the parser the strings are already concatenates  so it doesn t matter if someone is trying to split the script tag into separate strings  If you re stuck using jQuery s tooltips  this appears to be a solid solution

[jquery] Jquery UI tooltip does not support html content

Examples related to jquery

Examples related to html

Examples related to jquery-ui

Examples related to jquery-ui-tooltip