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.
Related Topics
Rewrite Text Files with a fixed Line Length
Tutorial | 0 Comments
How to Replace multiple Texts at the same Time
Tutorial | 0 Comments
Repair Text Files with mixed Line Breaks
Tutorial | 0 Comments
CSS: Include CSS Stylesheets in HTML
Tutorial | 0 Comments
PHP: Sending an E-Mail
Tutorial | 0 Comments
jQuery: Read and Change Data Attribute Value
Tutorial | 0 Comments
Delphi: Multiline Caption for TLabel (at Run Time and Design Time)
Tutorial | 1 Comment
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.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.
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 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