newline in <td title="">

Html

Html Problem Overview


> 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?

Html Solutions


Solution 1 - Html

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.

Solution 2 - Html

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.

Solution 3 - Html

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...">

Solution 4 - Html

Using &#xA; Works in Chrome to create separate lines in a tooltip.

Solution 5 - Html

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.

Solution 6 - Html

Using &#013; 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">

Solution 7 - Html

I use the jQuery clueTip plugin for this.

Solution 8 - Html

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

Solution 9 - Html

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionspence91View Question on Stackoverflow
Solution 1 - HtmlRealHowToView Answer on Stackoverflow
Solution 2 - HtmlPetr TumaView Answer on Stackoverflow
Solution 3 - HtmlStéphane KleinView Answer on Stackoverflow
Solution 4 - HtmlDave Van MeterView Answer on Stackoverflow
Solution 5 - HtmlAdyView Answer on Stackoverflow
Solution 6 - HtmlErez CohenView Answer on Stackoverflow
Solution 7 - HtmltvanfossonView Answer on Stackoverflow
Solution 8 - HtmlGarethView Answer on Stackoverflow
Solution 9 - HtmlbaikView Answer on Stackoverflow