|
|
Posted by Jonathan N. Little on 08/30/07 16:16
Art wrote:
> 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>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|