How can I use a carriage return in a HTML tooltip

Question

I m currently adding verbose tooltips to our site  and I d like  without having to resort to a whizz-bang jQuery plugin  I know there are many   to use carriage returns to format the tooltip   To add the tip I m using the title attribute  I ve looked around the usual sites and using the basic template of    lt a title  Tool Tip On New Line  gt link with tip lt  a gt    I ve tried replacing the   with     lt br   gt   amp 013     amp  13   r n Environment NewLine  I m using C     None of the above works  Is it possible

User · Answer

As a contribution to the  amp  013  solution  we can also use  amp  009 for tabs if you ever need to do something like this   x000D   x000D   lt button title  My to-do list  amp  013  amp  009 -Item 2 amp  013  amp  009 -Item 3 amp  013  amp  009 -Item 4 amp  013  amp  009  amp  009 -Subitem 1  gt TEST lt  button gt  x000D   x000D   x000D   Demo

User · Answer

amp  13  will work on all majors browsers  IE included

User · Answer

Just use this    lt a title  Tool amp  x0aTip amp  x0aOn amp  x0aNew amp  x0aLine  gt link with tip lt  a gt    You can add new line on title by using this  amp  x0a

User · Answer

Razor Syntax  In the case of ASP NET MVC you can just store the title as a variable as use  r n and it ll work           var logTooltip    Sunday r nMonday r netc        lt h3 title   logTooltip  gt Logs lt  h3 gt

User · Answer

As for whom  amp  10  didn t work you have to style the element on which lines are visible in as   white-space  pre-line   Referenced from this Answer   https   stackoverflow com a 17172412 1460591

User · Answer

hack but works -  tested on chrome and mobile   just add no break spaces  nbsp  till it breaks - you might have to limit the tooltip size depending on the amount of content but for small text messages this works    amp nbsp  amp nbsp  etc   Tried everything above and this is the only thing that worked for me -

User · Answer

We had a requirement where we needed to test all of these  here is what I wish to share   x000D   x000D  document getElementById  tooltip   setAttribute  title    Tool x0ATip x0AOn x0ANew x0ALine   x000D   lt p title  Tool x000D  Tip x000D  On x000D  New x000D  Line  gt Tooltip with  lt pre gt  x000D    new  x000D    line lt  pre gt  Works in all browsers lt  p gt  x000D   lt hr  gt  x000D   x000D   lt p title  Tool amp  13 Tip amp  13 On amp  13 New amp  13 Line  gt Tooltip with  lt code gt  amp amp  13  lt  code gt  Not works Firefox browsers lt  p gt  x000D   lt hr  gt  x000D   x000D   lt p title  Tool amp  10 Tip amp  10 On amp  10 New amp  10 Line  gt Tooltip with  lt code gt  amp amp  10  lt  code gt  Works in some browsers lt  p gt  x000D   lt hr  gt  x000D   x000D   lt p title  Tool amp  x0aTip amp  x0aOn amp  x0aNew amp  x0aLine  gt Tooltip with  lt code gt  amp amp  xD  lt  code gt  May work in some browsers lt  p gt  x000D   lt hr  gt  x000D   x000D   lt p id  tooltip  gt Tooltip with  lt code gt document getElementById  tooltip   setAttribute  title    Tool x0ATip x0AOn x0ANew x0ALine   lt  code gt  May work in some browsers lt  p gt  x000D   lt hr  gt  x000D   x000D   x000D   lt p title  List  x000D        List item here x000D        Another list item here x000D        Aaaand another list item  lol  gt Tooltip with  lt code gt      lt  code gt Unordered list tooltip lt  p gt  x000D   lt hr  gt  x000D   x000D   x000D   lt p title  Tool nTip nOn nNew nLine  gt Tooltip with  lt code gt  n lt  code gt  May not work in modern browsers lt  p gt  x000D   lt hr  gt  x000D   x000D   lt p title  Tool tTip tOn tNew tLine  gt Tooltip with  lt code gt  t lt  code gt  May not work in modern browsers lt  p gt  x000D   lt hr  gt  x000D   x000D   lt p title  Tool amp  013 Tip amp  013 On amp  013 New amp  013 Line  gt Tooltip with  lt code gt  amp amp  013  lt  code gt  Works in most browsers lt  p gt  x000D   lt hr  gt  x000D   x000D   x000D    Fiddle

User · Answer

This  amp  013  should work if you just use a simple title attribute    on bootstrap popovers  just use data-html  true   and use html in the data-content attribute       x000D   x000D   lt div title  Hello  amp  013 World  gt hover here lt  div gt  x000D   x000D   x000D

User · Answer

As a contribution to the  amp  013  solution  we can also use  amp  009 for tabs if you ever need to do something like this   x000D   x000D   lt button title  My to-do list  amp  013  amp  009 -Item 2 amp  013  amp  009 -Item 3 amp  013  amp  009 -Item 4 amp  013  amp  009  amp  009 -Subitem 1  gt TEST lt  button gt  x000D   x000D   x000D   Demo

User · Answer

amp  13  will work on all majors browsers  IE included

User · Answer

The latest specification allows line feed character  so a simple line break inside the attribute or entity  amp  10   note that characters   and   are required  are OK

User · Answer

It   s so simple you   ll kick yourself  just press Enter   x000D   x000D   lt a href     title  Tool Tip On New Line  gt link with tip lt  a gt  x000D   x000D   x000D

User · Answer

From the information available on accessibility and the use of tooltips making them larger with the use of CR or line break is appreciated  the fact that the various browsers cannot will not agree on basics shows that they don t much care about accessibility

User · Answer

Try character 10   It won t work in Firefox though         The text is displayed  if at all  in a   browser dependent manner  Small   tooltips work on most browsers  Long   tooltips and line breaking work in IE   and Safari  use  amp  10  or  amp  13  for a   new newline   Firefox and Opera do not   support newlines  Firefox does not   support long tooltips    http   modp com wiki htmltitletooltips  Update   As of January 2015 Firefox does support using  amp  13  to insert a line break in an HTML title attribute  See the snippet example below    x000D   x000D   lt a href     title  Line 1 amp  13 Line 2 amp  13 Line 3  gt Hover for multi-line title lt  a gt  x000D   x000D   x000D

User · Answer

Try character 10   It won t work in Firefox though         The text is displayed  if at all  in a   browser dependent manner  Small   tooltips work on most browsers  Long   tooltips and line breaking work in IE   and Safari  use  amp  10  or  amp  13  for a   new newline   Firefox and Opera do not   support newlines  Firefox does not   support long tooltips    http   modp com wiki htmltitletooltips  Update   As of January 2015 Firefox does support using  amp  13  to insert a line break in an HTML title attribute  See the snippet example below    x000D   x000D   lt a href     title  Line 1 amp  13 Line 2 amp  13 Line 3  gt Hover for multi-line title lt  a gt  x000D   x000D   x000D

User · Answer

On Chrome 16  and possibly earlier versions  you can use   n   As a sidenote    t  also works

User · Answer

amp  13  will work on all majors browsers  IE included

User · Answer

The latest specification allows line feed character  so a simple line break inside the attribute or entity  amp  10   note that characters   and   are required  are OK

User · Answer

amp  xD      lt ----- This is the text needed to insert Carry Return

User · Answer

It   s so simple you   ll kick yourself  just press Enter   x000D   x000D   lt a href     title  Tool Tip On New Line  gt link with tip lt  a gt  x000D   x000D   x000D

User · Answer

Just use this    lt a title  Tool amp  x0aTip amp  x0aOn amp  x0aNew amp  x0aLine  gt link with tip lt  a gt    You can add new line on title by using this  amp  x0a

User · Answer

Also worth mentioning  if you are setting the title attribute with Javascript like this   divElement setAttribute  title    Line one amp  10 Line two     It won t work  You have to replace that ASCII decimal 10 to a ASCII hexadecimal A in the way it s escaped with Javascript  Like this   divElement setAttribute  title    Line one x0ALine two

User · Answer

I know I m late to the party  but for those that just want to see this working  here s a demo  http   jsfiddle net rzea vsp6840b 3   HTML used    lt a href     title  First Line amp  013 Second Line  gt Multiline Tooltip lt  a gt   lt br gt   lt br gt   lt a href     title  List        List item here       Another list item here       Aaaand another list item  lol  gt Unordered list tooltip lt  a gt

User · Answer

amp  13  will work on all majors browsers  IE included

User · Answer

Much nicer looking tooltips can be created manually  and can include HTML formatting    lt  DOCTYPE html gt   lt html gt   lt style gt   tooltip       position  relative      display  inline-block      border-bottom  1px dotted black      tooltip  tooltiptext       visibility  hidden      width  120px      background-color   555      color   fff      text-align  center      border-radius  6px      padding  5px 0      position  absolute      z-index  1      bottom  125       left  50       margin-left  -60px      opacity  0      transition  opacity 0 3s      tooltip  tooltiptext  after       content          position  absolute      top  100       left  50       margin-left  -5px      border-width  5px      border-style  solid      border-color   555 transparent transparent transparent      tooltip hover  tooltiptext       visibility  visible      opacity  1     lt  style gt   lt body style  text-align center   gt    lt h2 gt Tooltip lt  h2 gt   lt p gt Move the mouse  lt a href     title  some text more amp  13  amp  10 and then some  gt over lt  a gt  the text below  lt  p gt    lt div class  tooltip  gt Hover over me  lt span class  tooltiptext  gt Tooltip text some  lt b gt more lt  b gt  lt br  gt   lt i gt and lt  i gt  more lt  span gt   lt  div gt    lt div class  tooltip  gt Each tooltip is independent  lt span class  tooltiptext  gt Other tooltip text some more lt br  gt  and more lt  span gt   lt  div gt    lt  body gt   lt  html gt    This is taken from the w3schools post on this  Experiment with the above code here

User · Answer

From the information available on accessibility and the use of tooltips making them larger with the use of CR or line break is appreciated  the fact that the various browsers cannot will not agree on basics shows that they don t much care about accessibility

User · Answer

As of Firefox 12 they now support line breaks using the line feed HTML entity   amp  10    lt span title  First line amp  10 Second line  gt Test lt  span gt    This works in IE and is the correct according to the HTML5 spec for the title attribute

User · Answer

Just use JavaScript   Then compatible with most and older browsers  Use the escape sequence  n for newline      document getElementById  ElementID   title    First Line text  n Second line text

User · Answer

I have tried with    10   to display title text in new line and it s work like a charm

User · Answer

I am on firefox 68 7 0esr and the  amp  013  doesn t work   Breaking the lines via  lt CR gt  did work so I am going with that since it simple and forward  i e    lt option title  Constraint PSC SCS Activity Definition Constraint Checker Database Start Notifier  gt CnCk

User · Answer

Tested this in IE  Chrome  Safari  Firefox  latest versions 2012-11-27    amp  13   Works in all of them

User · Answer

Razor Syntax  In the case of ASP NET MVC you can just store the title as a variable as use  r n and it ll work           var logTooltip    Sunday r nMonday r netc        lt h3 title   logTooltip  gt Logs lt  h3 gt

User · Answer

I don t believe it is  Firefox 2 trims long link titles anyway and they should really only be used to convey a small amount of help text  If you need more explanation text I would suggest that it belongs in a paragraph associated with the link  You could then add the tooltip javascript code to hide those paragraphs and show them as tooltips on hover  That s your best bet for getting it to work cross-browser IMO

User · Answer

Try character 10   It won t work in Firefox though         The text is displayed  if at all  in a   browser dependent manner  Small   tooltips work on most browsers  Long   tooltips and line breaking work in IE   and Safari  use  amp  10  or  amp  13  for a   new newline   Firefox and Opera do not   support newlines  Firefox does not   support long tooltips    http   modp com wiki htmltitletooltips  Update   As of January 2015 Firefox does support using  amp  13  to insert a line break in an HTML title attribute  See the snippet example below    x000D   x000D   lt a href     title  Line 1 amp  13 Line 2 amp  13 Line 3  gt Hover for multi-line title lt  a gt  x000D   x000D   x000D

User · Answer

Much nicer looking tooltips can be created manually  and can include HTML formatting    lt  DOCTYPE html gt   lt html gt   lt style gt   tooltip       position  relative      display  inline-block      border-bottom  1px dotted black      tooltip  tooltiptext       visibility  hidden      width  120px      background-color   555      color   fff      text-align  center      border-radius  6px      padding  5px 0      position  absolute      z-index  1      bottom  125       left  50       margin-left  -60px      opacity  0      transition  opacity 0 3s      tooltip  tooltiptext  after       content          position  absolute      top  100       left  50       margin-left  -5px      border-width  5px      border-style  solid      border-color   555 transparent transparent transparent      tooltip hover  tooltiptext       visibility  visible      opacity  1     lt  style gt   lt body style  text-align center   gt    lt h2 gt Tooltip lt  h2 gt   lt p gt Move the mouse  lt a href     title  some text more amp  13  amp  10 and then some  gt over lt  a gt  the text below  lt  p gt    lt div class  tooltip  gt Hover over me  lt span class  tooltiptext  gt Tooltip text some  lt b gt more lt  b gt  lt br  gt   lt i gt and lt  i gt  more lt  span gt   lt  div gt    lt div class  tooltip  gt Each tooltip is independent  lt span class  tooltiptext  gt Other tooltip text some more lt br  gt  and more lt  span gt   lt  div gt    lt  body gt   lt  html gt    This is taken from the w3schools post on this  Experiment with the above code here

User · Answer

On Chrome 79   amp  13  does not work anymore   I was successful with    amp  13  amp  10   This works in all major browsers

User · Answer

amp  xD      lt ----- This is the text needed to insert Carry Return

User · Answer

use data-html  true  and apply  lt br gt

User · Answer

The latest specification allows line feed character  so a simple line break inside the attribute or entity  amp  10   note that characters   and   are required  are OK

User · Answer

On Chrome 16  and possibly earlier versions  you can use   n   As a sidenote    t  also works

User · Answer

If you are using jQuery      td  attr  title    One  n Two  n Three      will work   tested in IE-9   working

User · Answer

We had a requirement where we needed to test all of these  here is what I wish to share   x000D   x000D  document getElementById  tooltip   setAttribute  title    Tool x0ATip x0AOn x0ANew x0ALine   x000D   lt p title  Tool x000D  Tip x000D  On x000D  New x000D  Line  gt Tooltip with  lt pre gt  x000D    new  x000D    line lt  pre gt  Works in all browsers lt  p gt  x000D   lt hr  gt  x000D   x000D   lt p title  Tool amp  13 Tip amp  13 On amp  13 New amp  13 Line  gt Tooltip with  lt code gt  amp amp  13  lt  code gt  Not works Firefox browsers lt  p gt  x000D   lt hr  gt  x000D   x000D   lt p title  Tool amp  10 Tip amp  10 On amp  10 New amp  10 Line  gt Tooltip with  lt code gt  amp amp  10  lt  code gt  Works in some browsers lt  p gt  x000D   lt hr  gt  x000D   x000D   lt p title  Tool amp  x0aTip amp  x0aOn amp  x0aNew amp  x0aLine  gt Tooltip with  lt code gt  amp amp  xD  lt  code gt  May work in some browsers lt  p gt  x000D   lt hr  gt  x000D   x000D   lt p id  tooltip  gt Tooltip with  lt code gt document getElementById  tooltip   setAttribute  title    Tool x0ATip x0AOn x0ANew x0ALine   lt  code gt  May work in some browsers lt  p gt  x000D   lt hr  gt  x000D   x000D   x000D   lt p title  List  x000D        List item here x000D        Another list item here x000D        Aaaand another list item  lol  gt Tooltip with  lt code gt      lt  code gt Unordered list tooltip lt  p gt  x000D   lt hr  gt  x000D   x000D   x000D   lt p title  Tool nTip nOn nNew nLine  gt Tooltip with  lt code gt  n lt  code gt  May not work in modern browsers lt  p gt  x000D   lt hr  gt  x000D   x000D   lt p title  Tool tTip tOn tNew tLine  gt Tooltip with  lt code gt  t lt  code gt  May not work in modern browsers lt  p gt  x000D   lt hr  gt  x000D   x000D   lt p title  Tool amp  013 Tip amp  013 On amp  013 New amp  013 Line  gt Tooltip with  lt code gt  amp amp  013  lt  code gt  Works in most browsers lt  p gt  x000D   lt hr  gt  x000D   x000D   x000D    Fiddle

User · Answer

As of Firefox 12 they now support line breaks using the line feed HTML entity   amp  10    lt span title  First line amp  10 Second line  gt Test lt  span gt    This works in IE and is the correct according to the HTML5 spec for the title attribute

User · Answer

I don t believe it is  Firefox 2 trims long link titles anyway and they should really only be used to convey a small amount of help text  If you need more explanation text I would suggest that it belongs in a paragraph associated with the link  You could then add the tooltip javascript code to hide those paragraphs and show them as tooltips on hover  That s your best bet for getting it to work cross-browser IMO

User · Answer

Tested this in IE  Chrome  Safari  Firefox  latest versions 2012-11-27    amp  13   Works in all of them

User · Answer

According to this article on the w3c website      CDATA is a sequence of characters from the document character set and   may include character entities  User agents should interpret attribute   values as follows          Replace character entities with characters    Ignore line feeds    Replace each carriage return or tab with a single space       This means that  at least  CR and LF won t work inside title attribute  I suggest that you use a tooltip plugin  Most of these plugins allow arbitrary HTML to be displayed as an element s tooltip

User · Answer

hack but works -  tested on chrome and mobile   just add no break spaces  nbsp  till it breaks - you might have to limit the tooltip size depending on the amount of content but for small text messages this works    amp nbsp  amp nbsp  etc   Tried everything above and this is the only thing that worked for me -

User · Answer

This  amp  013  should work if you just use a simple title attribute    on bootstrap popovers  just use data-html  true   and use html in the data-content attribute       x000D   x000D   lt div title  Hello  amp  013 World  gt hover here lt  div gt  x000D   x000D   x000D

User · Answer

It   s so simple you   ll kick yourself  just press Enter   x000D   x000D   lt a href     title  Tool Tip On New Line  gt link with tip lt  a gt  x000D   x000D   x000D

User · Answer

I have tried with    10   to display title text in new line and it s work like a charm

User · Answer

I don t believe it is  Firefox 2 trims long link titles anyway and they should really only be used to convey a small amount of help text  If you need more explanation text I would suggest that it belongs in a paragraph associated with the link  You could then add the tooltip javascript code to hide those paragraphs and show them as tooltips on hover  That s your best bet for getting it to work cross-browser IMO

User · Answer

I am on firefox 68 7 0esr and the  amp  013  doesn t work   Breaking the lines via  lt CR gt  did work so I am going with that since it simple and forward  i e    lt option title  Constraint PSC SCS Activity Definition Constraint Checker Database Start Notifier  gt CnCk

User · Answer

On Chrome 79   amp  13  does not work anymore   I was successful with    amp  13  amp  10   This works in all major browsers

User · Answer

Try character 10   It won t work in Firefox though         The text is displayed  if at all  in a   browser dependent manner  Small   tooltips work on most browsers  Long   tooltips and line breaking work in IE   and Safari  use  amp  10  or  amp  13  for a   new newline   Firefox and Opera do not   support newlines  Firefox does not   support long tooltips    http   modp com wiki htmltitletooltips  Update   As of January 2015 Firefox does support using  amp  13  to insert a line break in an HTML title attribute  See the snippet example below    x000D   x000D   lt a href     title  Line 1 amp  13 Line 2 amp  13 Line 3  gt Hover for multi-line title lt  a gt  x000D   x000D   x000D

User · Answer

According to this article on the w3c website      CDATA is a sequence of characters from the document character set and   may include character entities  User agents should interpret attribute   values as follows          Replace character entities with characters    Ignore line feeds    Replace each carriage return or tab with a single space       This means that  at least  CR and LF won t work inside title attribute  I suggest that you use a tooltip plugin  Most of these plugins allow arbitrary HTML to be displayed as an element s tooltip

User · Answer

Just use JavaScript   Then compatible with most and older browsers  Use the escape sequence  n for newline      document getElementById  ElementID   title    First Line text  n Second line text

User · Answer

I know I m late to the party  but for those that just want to see this working  here s a demo  http   jsfiddle net rzea vsp6840b 3   HTML used    lt a href     title  First Line amp  013 Second Line  gt Multiline Tooltip lt  a gt   lt br gt   lt br gt   lt a href     title  List        List item here       Another list item here       Aaaand another list item  lol  gt Unordered list tooltip lt  a gt

User · Answer

As for whom  amp  10  didn t work you have to style the element on which lines are visible in as   white-space  pre-line   Referenced from this Answer   https   stackoverflow com a 17172412 1460591

User · Answer

The latest specification allows line feed character  so a simple line break inside the attribute or entity  amp  10   note that characters   and   are required  are OK

User · Answer

It   s so simple you   ll kick yourself  just press Enter   x000D   x000D   lt a href     title  Tool Tip On New Line  gt link with tip lt  a gt  x000D   x000D   x000D

User · Answer

If you are using jQuery      td  attr  title    One  n Two  n Three      will work   tested in IE-9   working

User · Answer

Also worth mentioning  if you are setting the title attribute with Javascript like this   divElement setAttribute  title    Line one amp  10 Line two     It won t work  You have to replace that ASCII decimal 10 to a ASCII hexadecimal A in the way it s escaped with Javascript  Like this   divElement setAttribute  title    Line one x0ALine two

User · Answer

use data-html  true  and apply  lt br gt

User · Answer

I don t believe it is  Firefox 2 trims long link titles anyway and they should really only be used to convey a small amount of help text  If you need more explanation text I would suggest that it belongs in a paragraph associated with the link  You could then add the tooltip javascript code to hide those paragraphs and show them as tooltips on hover  That s your best bet for getting it to work cross-browser IMO

[html] How can I use a carriage return in a HTML tooltip?

Demo

Examples related to html

Examples related to title

Examples related to tooltip