How can I display the HTML "title" attribute in multiple lines in Firefox?

Question

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

I would like to display the "title" attribute tooltip in several lines, so it looks like this:

Line 1
Line 2

<div title="Line 1\nLine 2">Secret</div>

but it didn't work.

Is that possible?

what is the sence? it wont be displayed in any browser since they all have single-line caption bar. — heximal, Mar 04 '11 at 11:58
If you have so much information that it needs to word wrap, then you have too much information for a tooltip. — Quentin, Mar 04 '11 at 12:01
I have very few information. It just looks better in several lines! — Misha Moroshko, Mar 04 '11 at 12:03
@Quentin, what's the alternative, make a bunch of extra elements to show documentation on what the controls are for or how to use them? — Synetech, Apr 14 '23 at 00:25
I found a small issue with multiline tooltips & mouseleave event which I detailed [here](https://stackoverflow.com/q/76498447/6908282) — Gangula, Jun 17 '23 at 23:05

anothershrubery · Answer 1 · 2020-02-13T13:27:41.177

110

You can enter 
. In other words:

<div title="Line 1&#10;Line 2">Secret</div>

edited Feb 13 '20 at 13:27

answered Mar 04 '11 at 12:13

anothershrubery

2

It works in Firefox 16.0.1, IE7+, Chrome. It does not work in FireFox 4.0.1 (at least). – Guillaume Oct 18 '12 at 14:26
works on Chrome 49 (OSX) – sebhaase Jan 08 '16 at 17:52
Tested in Firefox 53.0 and it worked – StR Jun 07 '17 at 15:36
4

Does NOT work on Chrome Version 60.0.3112.101 (Official Build) (64-bit, Linux (Ubuntu)) – Martin Thoma Aug 22 '17 at 12:50
Works on Firefox 55.0.2 (64-bit, Linux (Ubuntu)) – Martin Thoma Aug 22 '17 at 12:51
Works on Chrome Version 62.0.3202.94 (Official Build) (64-bit) – Axel Bregnsbo Dec 05 '17 at 22:00
hmmmm I'm not sure how this could work for anybody o.O "13" in decimal is a carriage return, as far as I understood the question, it should be ` ` or ` ` - I'll add an answer with some tests (because this particular SO page is still #1 in google :)) Edit: no, seems like I can't answer. See https://jsfiddle.net/kpion/Lrpxqgm2/ then. It should be e.g. `
` – konrados May 13 '18 at 09:16
Does NOT work on Chrome 79.0.3945.130 (Offical), (64-bit, Windows 10) – Stalinko Feb 06 '20 at 09:18
Works for me on Chrome Version 80.0.3987.106 (64-bit, Windows 7) – Liga Feb 28 '20 at 07:09
Works on Chrome Version 91.0.4472.106 (Official Build) (x86_64) – LuisAFK Jun 24 '21 at 07:04
does not work on `Edge 114.0.1823.43 (Official build) (64-bit)` – Gangula Jun 17 '23 at 09:00

score 8 · Accepted Answer · edited May 23 '17 at 12:25

8

<div title="Line 1  
Line 2">Secret</div>

Though it is said that it doesn't work with Firefox.

edited May 23 '17 at 12:25

Community

answered Mar 04 '11 at 12:08

nollfem

6

This can cause browser incompatibilities and validation errors. – anothershrubery Mar 04 '11 at 12:14
I just tested this in chrome (108.0.5359.125), Firefox (108.0.1), opera (94.0.4606.38), and edge (108.0.1462.54) and it does seem to work nicely. – Jay Jan 05 '23 at 04:40
1

Note that this considers indentation as well - which would be present in most of the code for readability. So it may not give desired results – Gangula Jun 17 '23 at 08:56

score 2 · Answer 3 · edited Apr 02 '22 at 21:11

2

Either add new lines within the HTML content itself

<div title="Line 1
Line 2">Secret</div>

Or make your own tooltip using JavaScript and CSS.

edited Apr 02 '22 at 21:11

Peter Mortensen

answered Mar 04 '11 at 12:10

AlanFoster

1

This can cause browser incompatibilities and validation errors. – anothershrubery Mar 04 '11 at 12:14
Adding your own tooltop using javascript/css is the only way to get this working completely cross browser. – anothershrubery Mar 04 '11 at 12:25

3 Answers3