Is it possible to format an HTML tooltip title attribute

Question

Is it possible to format an HTML tooltip   E g  I have a DIV with attribute title  foo     When I have text-size of my browser zoomed in or out in  the text size of the tooltip remains unchanged   Is there a way to make the tooltip font scale with the browser setting

User · Answer

Mootools also has a nice  Tips  class available in their  more builder

User · Answer

In bootstrap tooltip just use data-html  true

User · Answer

No  it s not possible  browsers have their own ways to implement tooltip  All you can do is to create some div that behaves like an HTML tooltip  mostly it s just  show on hover   with Javascript  and then style it the way you want   With this  you wouldn t have to worry about browser s zooming in or out  since the text inside the tooltip div is an actual HTML  it would scale accordingly   See Jonathan s post for some good resource

User · Answer

it seems you can use css and a trick  no javascript  for doing it   http   davidwalsh name css-tooltips  http   www menucool com tooltip css-tooltip  http   sixrevisions com css css-only-tooltips   http   csstooltip com

User · Answer

Not sure if it works with all browsers or 3rd party tools  but I have had success just specifying   n  in tooltips for newline  works with dhtmlx in at least ie11  firefox and chrome  for  var key in oPendingData        var obj   oPendingData key       this cells sRowID  nColInd  cell title      n    obj  ChangeUser            obj sCol

User · Answer

No  But there are other options out there like Overlib  and jQuery that allow you this freedom    jTip   http   www codylindley com blogstuff js jtip  jQuery Tooltip   https   jqueryui com tooltip    Personally  I would suggest jQuery as the route to take  It s typically very unobtrusive  and requires no additional setup in the markup of your site  with the exception of adding the jquery script tag in your  lt head gt

User · Answer

I know this is an old post but I would like to add my answer for future reference  I use jQuery and css to style my tooltips  easiest-tooltip-and-image-preview-using-jquery  for a demo  http   cssglobe com lab tooltip 02   On my static websites this just worked great  However  during migrating to Wordpress it stopped  My solution was to change tags like  lt br gt  and  lt span gt  into this   amp lt br amp gt  and  amp lt span amp gt  This works for me

User · Answer

Try using entity codes such as  amp  013  for CR   amp  010  for LF  and  amp  009  for TAB   For example    x000D   x000D   lt div title  1  amp  009 A amp  013  amp  010 2  amp  009 B  gt Hover Me lt  div gt  x000D   x000D   x000D

User · Answer

Mootools also has a nice  Tips  class available in their  more builder

User · Answer

Mootools also has a nice  Tips  class available in their  more builder

User · Answer

No  But there are other options out there like Overlib  and jQuery that allow you this freedom    jTip   http   www codylindley com blogstuff js jtip  jQuery Tooltip   https   jqueryui com tooltip    Personally  I would suggest jQuery as the route to take  It s typically very unobtrusive  and requires no additional setup in the markup of your site  with the exception of adding the jquery script tag in your  lt head gt

User · Answer

it seems you can use css and a trick  no javascript  for doing it   http   davidwalsh name css-tooltips  http   www menucool com tooltip css-tooltip  http   sixrevisions com css css-only-tooltips   http   csstooltip com

User · Answer

Better late than never  they always say   Normally I d use jQuery to solve such a situation  However  when working on a site for a client which required a javascript-less solution  I came up with the following    lt div class  hover-container  gt       lt div class  hover-content  gt           lt p gt Content with lt br   gt          normal formatting lt  p gt       lt  div gt   lt  div gt    By using the following css  you get the same situation as with a title    hover-container       position  relative      hover-content       position  absolute      bottom  -10px      right  10px      display  none      hover-container hover  hover-content       display  block      This gives you the option to style it according to your needs as well  and it works in all browsers  Even the ones where javascript is disabled   Pros    You have a lot of influence on the styling It works in  nearly  all browsers   Cons    It s harder to position the tooltip

User · Answer

No  But there are other options out there like Overlib  and jQuery that allow you this freedom    jTip   http   www codylindley com blogstuff js jtip  jQuery Tooltip   https   jqueryui com tooltip    Personally  I would suggest jQuery as the route to take  It s typically very unobtrusive  and requires no additional setup in the markup of your site  with the exception of adding the jquery script tag in your  lt head gt

User · Answer

No  But there are other options out there like Overlib  and jQuery that allow you this freedom    jTip   http   www codylindley com blogstuff js jtip  jQuery Tooltip   https   jqueryui com tooltip    Personally  I would suggest jQuery as the route to take  It s typically very unobtrusive  and requires no additional setup in the markup of your site  with the exception of adding the jquery script tag in your  lt head gt

User · Answer

No  it s not possible  browsers have their own ways to implement tooltip  All you can do is to create some div that behaves like an HTML tooltip  mostly it s just  show on hover   with Javascript  and then style it the way you want   With this  you wouldn t have to worry about browser s zooming in or out  since the text inside the tooltip div is an actual HTML  it would scale accordingly   See Jonathan s post for some good resource

User · Answer

Better late than never  they always say   Normally I d use jQuery to solve such a situation  However  when working on a site for a client which required a javascript-less solution  I came up with the following    lt div class  hover-container  gt       lt div class  hover-content  gt           lt p gt Content with lt br   gt          normal formatting lt  p gt       lt  div gt   lt  div gt    By using the following css  you get the same situation as with a title    hover-container       position  relative      hover-content       position  absolute      bottom  -10px      right  10px      display  none      hover-container hover  hover-content       display  block      This gives you the option to style it according to your needs as well  and it works in all browsers  Even the ones where javascript is disabled   Pros    You have a lot of influence on the styling It works in  nearly  all browsers   Cons    It s harder to position the tooltip

User · Answer

Try using entity codes such as  amp  013  for CR   amp  010  for LF  and  amp  009  for TAB   For example    x000D   x000D   lt div title  1  amp  009 A amp  013  amp  010 2  amp  009 B  gt Hover Me lt  div gt  x000D   x000D   x000D

User · Answer

I know this is an old post but I would like to add my answer for future reference  I use jQuery and css to style my tooltips  easiest-tooltip-and-image-preview-using-jquery  for a demo  http   cssglobe com lab tooltip 02   On my static websites this just worked great  However  during migrating to Wordpress it stopped  My solution was to change tags like  lt br gt  and  lt span gt  into this   amp lt br amp gt  and  amp lt span amp gt  This works for me

User · Answer

Not sure if it works with all browsers or 3rd party tools  but I have had success just specifying   n  in tooltips for newline  works with dhtmlx in at least ie11  firefox and chrome  for  var key in oPendingData        var obj   oPendingData key       this cells sRowID  nColInd  cell title      n    obj  ChangeUser            obj sCol

User · Answer

No  it s not possible  browsers have their own ways to implement tooltip  All you can do is to create some div that behaves like an HTML tooltip  mostly it s just  show on hover   with Javascript  and then style it the way you want   With this  you wouldn t have to worry about browser s zooming in or out  since the text inside the tooltip div is an actual HTML  it would scale accordingly   See Jonathan s post for some good resource

User · Answer

No  it s not possible  browsers have their own ways to implement tooltip  All you can do is to create some div that behaves like an HTML tooltip  mostly it s just  show on hover   with Javascript  and then style it the way you want   With this  you wouldn t have to worry about browser s zooming in or out  since the text inside the tooltip div is an actual HTML  it would scale accordingly   See Jonathan s post for some good resource

User · Answer

Mootools also has a nice  Tips  class available in their  more builder

User · Answer

In bootstrap tooltip just use data-html  true

[html] Is it possible to format an HTML tooltip (title attribute)?

Examples related to html

Examples related to tooltip