48 Votes

HTML: Line break in the title attribute or tooltip

Question by Consumer | 2012-09-09 at 17:27

With the following HTML code, I can create a nice tool tip when you move the mouse over the element:

<img src="pic.jpg" title="That will be shown.">

However, I come to my computer programming limitations, as soon as I want to make the tooltip multiline. How can you do that? I have already tried some things like <br> or \n. But that does not work there.

4Best Answer8 Votes

If you test with Firefox, it will not work, no matter which character you're taking as a line break. Firefox replaces all characters for line breaks such as \r \n or \r\n with a space. The HTML tag <br> you can not use at all, because this only works in the HTML area as a line break.

In browsers such as Safari, Google Chrome or Internet Explorer, you can use &#10; as a line break. This combination is evaluated as new line. Firefox also ignores that.

The reason is, that the title attribute should serve rather as a brief description than to display a long text. Some browsers even shorten the title attribute, and does not show their full length.

The solution to your problem is this: You have to show the tooltip with JavaScript and a mouseover effect. Then you can create your own DIV, where you have free reign over the design. When you move the mouse over the element, these DIV will be displayed as tooltip. I can recommend in the context, for example, the tooltip by bassistance.de for jQuery.
2012-09-10 at 20:41

ReplyPositive Negative

Related Topics

PHP: Sending an E-Mail

Tutorial | 0 Comments

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.


Ask your own question or write your own article on askingbox.com. That’s how it’s done.