On Fri, 31 Aug 2007, Tigdh Glesain wrote:
> Please forgive me if this question has been asked, and or answered,
> or if what I am asking is 'illegal' under the 'rules', in terms of
> accessibility and designer control going too far.
As far as I can see, the question is quite appropriate and on-topic, as
well as interesting, but the answer appears to be that the styling at
least currently falls outside the scope of what can be done in CSS.
> I'm seeking to learn whether there is a way to allow CSS to control the
> a:hover look of the 'title' tag in xhtml markup, one that allows the
> designer to change the 'pop-up' generic (bland) looking box.
>
> i.e. <a href="/" title="/">
The 'title' attribute is allowed for many other attributes as well. On the
other hand, there is no specification of how browsers _shall_ implement
that attribute. They might display it as a tooltip on mouseover, or they
might speak it when requested by the user, or they might ignore it.
Moreover, if they decide to display it as a tooltip, the tooltip
presentation is outside all control by CSS rules. It can affected by the
settings of the user's system, but not via CSS.
The tooltip, if present, has no defined connection with the :hover
pseudo-class.
> I've seen it done on another site, but the 'author' used a
> combination of javascript and DOM (which is all Greek to me) to
> achieve an opaque title tag 'pop-up'.
That's possible, and not necessarily very complicated.
You could also use pure CSS to _simulate_ a tooltip. This has nothing to
do with styling the tooltip implementation of 'title' attributes, but it
could be used for similar purposes.
Here's a quickly souped-up piece of demo code:
<style type="text/css">
.tooltip { display: none; }
a { position: relative; }
a:hover .tooltip { display: block; background: yellow;
padding: 0.1em 0.25em; border: solid #333 thin;
position: absolute; left: 1em; top: 1em; width: 10em; }
</style>
<a href="foo">Foo <span class="tooltip">Bar</span></a>
Drawbacks: Several, including the problem that in non-CSS rendering, the
intended "tooltip" text appears after the link as normal content. For
_some_ purposes, this might be acceptable and even desirable. You might
consider using Ruby-like markup then, using <span class="par">(</span>
with .span { display: none; }, etc., to surrond the "tooltip" so that in
non-CSS rendering,
Foo (Bar)
would appear.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
