Art said:
You can try placing an encoded line feed into the title:
<acronym title="apple pie
custard tart">
although this isn't universally recognized by all browsers for
tool-tips. Firefox, IE, and Safari do. Opera and Seamonkey don't
(treats it as a space).
Although the line feed isn't an HTML named entity
(
http://www.w3.org/TR/html401/sgml/entities.html), browsers historically
have recognized this numerical encoding method.
You didn't try this did you? It isn't recognized at all in a title
attribute for any browser that I know of including FF and Opera... Now
on Windows system
(LF+CR)works with Gecko and IE but not on
Opera... Doesn't work with FF on Linux but does with Konqueror... spotty
at best.
Jukka's suggestion of using a <span> element will work. However, unlike
the <acronym> element, there is no indication to the viewer (no dotted
underline or other decoration by the browser) that there is anything
additional information available about this word.
Agree, dessert is not an acronym.
Thus, a unique CSS style/class would need to be created for these
<span>'s to flag the user that there is additional information available
via tool-tip for the word. You could put a global message on your page
to that effect.
Sill idea but CSS popup would work and degrade where the information
would be availably to the user...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>CSS balloon</title>
<style type="text/css">
..balloon { position: relative; border-bottom: 1px dashed #0f0; }
..balloon span {
display: block; position: absolute;
top: .5em; left: -100em; /* push out of view*/
border: 1px solid #000; padding: .25em;
color: #000; background-color: #ffd;
white-space: nowrap; /* prevent wrapping except where you specify */
}
..balloon { behavior: url(IEFixes.htc); } /* IE hover attachment */
..balloon:hover span,
..balloon.hover span { left: 1em; } /* move into viewport */
</style>
</head>
<body>
<p>One way is with a CSS styled element <span class="balloon">
<span>apple pie<br>custard tart</span>desserts</span>,
would work. For <span title="12
345">IE</span> you will have to
use a bit of JavaScript
or HTC file hack.
</p>
</body>
</html>
and the HTC file:
<public:component>
// For MSIE use JScript to attach JS functions to compensate
// for missing pseudo-class support
// from Vladdy
http://www.vladdy.net/Demos/IEPseudoClassesFix.html
// updated for html4.01 jnl 3/06
<public:attach event="onmouseover" onevent="DoHover()">
<public:attach event="onmouseout" onevent="RestoreHover()">
<public:attach event="onmousedown" onevent="DoActive()">
<public:attach event="onmouseup" onevent="RestoreActive()">
<script type="text/jscript">
function DoHover(){
element.className += ' hover';
}
function DoActive(){
element.className += ' active';
}
function RestoreHover(){
element.className = element.className.replace(/\shover\b/,'');
}
function RestoreActive(){
element.className = element.className.replace(/\sactive\b/,'');
}
</script>
</public:component>
.