newline in

Question

Possible Duplicate:
How can I use a carriage return in a HTML tooltip?

I'd like to know if it's possible to force a newline to show in the tooltip when using title property of a TD. something like

<td title="lineone \n linetwo \n etc...">

Can this be done?

RealHowTo · Accepted Answer · 2016-09-20T11:43:46.640

186

This should now work with Internet Explorer, Firefox v12+ and Chrome 28+

<img src="'../images/foo.gif'" 
  alt="line 1&#013;line 2" title="line 1&#013;line 2">

Try a JavaScript tooltip library for a better result, something like OverLib.

edited Sep 20 '16 at 11:43

answered Oct 29 '08 at 11:24

RealHowTo

34,977
11
70
85

7

` ` works in Firefox 12.0... just FYI – Amy McCrobie Jun 05 '12 at 15:22
1

And Chrome! ;) @AmyMcCrobie (version 28.0.xxx and, the most recent. And probably with older ones too) – Nico Sep 18 '13 at 16:21
17

Note: ` ` is `\r` and ` ` is `\n` Both seem to work on my system, but if you have issues, this may be why. – Tyzoid Mar 14 '14 at 17:39
1

using this from `jquery` it appears to want the real value not the encoded one, as I think it encodes for you. I used `\r` – Maslow Mar 21 '14 at 17:14
works in chrome and ff. – Lemonade May 13 '14 at 13:13
On Windows new line is ` ` on unix ` ` ... using ` ` instead of ` ` may cause problems on some operating systems... as ` ` (`\r`) is totally opossite to ` ` (`\n`) (takes pointer back to upper line) – Flash Thunder Feb 08 '16 at 10:21
works in Chrome Does not work in Chrome (see also Stephen Kleins comment) – oleviolin May 02 '20 at 11:02
Do you really need the leading zero? ` ` works for me. – Nayuki Jul 18 '20 at 21:32
This does not work when set via jquery attr('title', title) – JaktensTid Jun 01 '21 at 15:08

score 41 · Answer 2 · answered Dec 15 '11 at 20:22

41

One way to achieve similar effect would be through CSS:

<td>Cell content.
  <div class="popup">
    This is the popup.
    <br>
    Another line of popup.
  </div>
</td>

And then use the following in CSS:

td div.popup { display: none; }
td:hover div.popup { display: block; position: absolute; }

You will want to add some borders and background to make the popup look decent, but this should sketch the idea. It has some drawbacks though, for example the popup is not positioned relative to mouse but relative to the containing cell.

answered Dec 15 '11 at 20:22

Petr Tuma

522
5
8

1

This should really be voted up higher. No need to get a jQuery plugin. This plus some extra styling and positioning should be a fantastic option for anybody. I'm going to use it right now, working for a gigantor company that you all know. – vbullinger Mar 19 '12 at 22:17
2

I think you need to update the css in case there is table inside a table to make css work properly. Use `td > div.restoredbpopup { display: none; } td:hover > div.restoredbpopup { display: block; position: absolute; }` – Radek Apr 25 '12 at 02:15

score 27 · Answer 3 · answered Jul 23 '10 at 08:15

27

The Extensible Markup Language (XML) 1.1 W3C Recommendation say

« All line breaks MUST have been normalized on input to #xA as described in 2.11 End-of-Line Handling, so the rest of this algorithm operates on text normalized in this way. »

The link is http://www.w3.org/TR/2006/REC-xml11-20060816/#AVNormalize

Then you can write :

<td title="lineone &#xA; linetwo &#xA; etc...">

answered Jul 23 '10 at 08:15

Stéphane Klein

856
1
11
20

2

Instead of the line breaks, spaces are displayed in Firefox. – Propeng Oct 02 '10 at 08:45
@J.Money with what doctype? xhtml or html(5)? – Tyzoid Mar 14 '14 at 17:40

score 7 · Answer 4 · answered May 16 '12 at 18:03

7

Using 
 Works in Chrome to create separate lines in a tooltip.

answered May 16 '12 at 18:03

Dave Van Meter

71
1
1

Equivalent to ` ` (newline, U+0A). – Nayuki Jul 18 '20 at 21:31

score 4 · Answer 5 · answered Sep 05 '12 at 14:45

4

Using  didn't work in my fb app. However this did, beautifully (in Chrome FF and IE):

<img src="'../images/foo.gif'" title="line 1&lt;br&gt;line 2">

answered Sep 05 '12 at 14:45

Erez Cohen

1,507
2
16
25

I had to strip off the first character so used this `<br>` with tipsy ... – Jammer Nov 19 '14 at 12:10
3

It displays *
* as text string in Chrome. – TMa Apr 27 '15 at 09:56

score 4 · Answer 6 · edited Nov 17 '10 at 02:35

4

This should be OK, but is Internet Explorer specific:

<td title="lineone
linetwo 
etc...">

As others have mentioned, the only other way is to use an HTML + JavaScript based tooltip if you're only interested in the tooltip. If this is for accessibility then you will probably need to stick to just single lines for consistency.

edited Nov 17 '10 at 02:35

Peter Mortensen

30,738
21
105
131

answered Oct 29 '08 at 11:16

Ady

4,736
2
22
20

sorry, i realise that my question wasn't very descriptive of the solution i was looking for... I'm looking for a way for newlines to show up on the tooltip, i tried this and it doesn't work in IE or firefox. – spence91 Oct 29 '08 at 11:22
Appologies, this should work OK for internet explorer, however I just checked with FireFox, and it looks like the line breaks are ignored. – Ady Oct 29 '08 at 11:24
2

Apologies again, as it does indeed work in IE, but not firefox – spence91 Oct 29 '08 at 11:25
1

@spence91, it also works on Google Chrome and Safari. – Derek 朕會功夫 Jan 05 '12 at 02:20

score 3 · Answer 7 · answered Dec 11 '08 at 17:38

3

I use the jQuery clueTip plugin for this.

answered Dec 11 '08 at 17:38

tvanfosson

524,688
99
697
795

score 2 · Answer 8 · answered Oct 29 '08 at 11:19

2

If you're looking to put line breaks into the tooltip that appears on mouseover, there's no reliable crossbrowser way to do that. You'd have to fall back to one of the many Javascript tooltip code samples

answered Oct 29 '08 at 11:19

Gareth

133,157
36
148
157

score 1 · Answer 9 · answered Dec 29 '10 at 15:01

1

The jquery colortip plugin also supports <br> tags in the title attribute, you might want to look into that one.

answered Dec 29 '10 at 15:01

baik

993
2
14
21

newline in

9 Answers9

Linked

Related