Wrapping title attribute

Question

Firefox does not wrap words in a title attribute:

<a title="longword"></a>

Is there a way to do word-wrapping in that case? I tried with:

<a title="longword" style="word-wrap:break-word;"></a>

but it does not work.

Chrome, instead, automatically wraps.

thats up to the web browser. have you considered writing your own tooltip? — Daniel A. White, Jan 22 '12 at 01:42

score 3 · Accepted Answer · edited May 23 '17 at 12:22

3

No, you cannot make Firefox deviate from its way of rendering title attribute values; cf. to How can I use a carriage return in a HTML tooltip?

The tooltips created by using title attributes are of questionable usability (tiny font that cannot be easily increased by the user; disapperance after some seconds; etc.), so they are suitable (at most) for short advisory titles (mainly for links), which not cause a need for wrapping.

For longer tooltips, consider using CSS techniques. Or just put the tip into the text proper.

edited May 23 '17 at 12:22

Community

1
1

answered Jan 22 '12 at 07:44

Jukka K. Korpela

195,524
37
270
390

The tooltip I have done works fine for what I need. Thanks for the "carriage return problem" link, I didn't think about it. – Simon Jan 22 '12 at 13:53
Why not update the answer to simply say that works? – Weihui Guo Aug 08 '18 at 19:04

score 2 · Answer 2 · answered Jan 22 '12 at 03:47

2

For what it's worth, the only part of the HTML5 specifications that deals with line breaks in title attributes states:

If the title attribute's value contains U+000A LINE FEED (LF) characters, the content is split into multiple lines. Each U+000A LINE FEED (LF) character represents a line break.

So you could break up the title attribute on the server-side, although this is unlikely to be a desirable solution. Alternatively, you can try inserting zero width spaces, though browser support for this may also be inconsistent.

answered Jan 22 '12 at 03:47

Yi Jiang

49,435
16
136
136

This works in Chrome, Firefox and IE as of 2014/08! Use in the title attribute. Be careful, IE wraps the title tooltips on its own, so it's probably best to check there first how the wrapping is done and "emulate" it by placing linefeeds at the same spots to avoid having extra linebreaks in IE. – Florian Ledermann Aug 14 '14 at 16:11

score 0 · Answer 3 · answered May 28 '23 at 05:00

0

@2023-05

Simply use 
 as the linebreak like this.

<div title="A &#10; Leaf &#10; Falls &#10; with &#10; Loneliness">
  Hover your mouse here to see the native tooltip content.
</div>

Here is a working demo. https://codepen.io/shrekuu/pen/dygLKGO

answered May 28 '23 at 05:00

shrekuu

1,716
1
23
38

score -3 · Answer 4 · answered Jul 27 '16 at 17:03

-3

Use escaped n, example:

<input type="text" title="first line \n second line"></input>

answered Jul 27 '16 at 17:03

Alaina

19
6

2

Did you even try? edge, firefox, or chrome? None of them works. In fact, works. – Weihui Guo Aug 08 '18 at 19:00

Wrapping title attribute

4 Answers4

Linked

Related