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

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

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

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

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

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

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

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

You can also achieve this completely without jQueryUI by using CSS styles  See the snippet below    x000D   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   lt div id  Tooltip Text container  gt  x000D     lt span gt  lt b gt Tooltip headline lt  b gt  lt  span gt  x000D     lt a href     gt  x000D       lt span class  tooltips  gt  x000D           lt b gt This is amp nbsp  lt  b gt  a tooltip lt br  gt  x000D           lt b gt This is amp nbsp  lt  b gt  another tooltip lt br  gt  x000D       lt  span gt  x000D     lt  a gt  x000D     lt br  gt Move the mousepointer to the tooltip headline above   x000D   lt  div gt  x000D   x000D   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

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

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

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

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

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

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

[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