Using iframes to dynamically generate tooltips

[Gabriel Gilini]

Hi,

I've been working on a user-assistance product, and one of the
features is the ability to easily build contextualized tooltips.

They are DIV elements with its appearance changeable through a control
panel, and sometimes a css rule from the website that my script is
running in will overrule my tooltip css, making it look awful. One
thing that I could do is to append !important all over my stylesheet,
but that just feels crappy.

So, one of my partners suggested that we use IFRAME elements to build
the tooltips on. That way we could append the stylesheet to the IFRAME
document, making it 'immaculate', so to speak. My doubt here is: is
there anything wrong with that? I mean, frames in general are bad for
a number of reasons, but in a dynamically generated tooltip, would
there be any harm?

I'd really like to hear your thoughts on this one.

Thanks

 

[Thomas 'PointedEars' Lahn]

They are DIV elements with its appearance changeable through a control
panel, and sometimes a css rule from the website that my script is
running in will overrule my tooltip css, making it look awful. One
thing that I could do is to append !important all over my stylesheet,
but that just feels crappy.

You may not need `!important' rules if your selectors have the same or a
greater specificity as those in the original document stylesheet. However,
in case you happen to encounter a non-compliant UA that does not honor
selector specificity as defined in CSS 2.x (i.e., MSHTML), `!important'
rules are the way to go. The number of relevant CSS properties is limited,
so the task can be accomplished this way.

So, one of my partners suggested that we use IFRAME elements to build
the tooltips on. That way we could append the stylesheet to the IFRAME
document, making it 'immaculate', so to speak. My doubt here is: is
there anything wrong with that? I mean, frames in general are bad for
a number of reasons, but in a dynamically generated tooltip, would
there be any harm?

Such as overkill, unnecessary dependency on client-side DOM scripting, slow
loading time, unnecessary increased server load? Take your pick.

You don't need another document context if you choose your `id', `class',
`style' attributes, and your style sheet selectors wisely.


PointedEars

 

[Thomas 'PointedEars' Lahn]

You don't need another document context if you choose your `id', `class',
`style' attributes, and your style sheet selectors wisely.

And, in case you don't know, save fancy animations like blending, you don't
need (and should not need, for accessibility) any client-side scripting for
tooltips.


PointedEars

 

[Gabriel Gilini]

And, in case you don't know, save fancy animations like blending, you don't
need (and should not need, for accessibility) any client-side scripting for
tooltips.

I'm sorry but I might be missing something here, but are you talking
about the - title - attribute?
As far as I can see, a richer tooltip generated by scripting,
providing a better explanation to UA's that support it, could and must
be concurrent with the standard practices. One does not eliminate the
other, quite the opposite.

Thanks for the input, I sure valuate it.

 

[Thomas 'PointedEars' Lahn]

I'm sorry but I might be missing something here, but are you talking
about the - title - attribute?

No, I am talking about the :hover and :focus CSS pseudo-classes.

As far as I can see, a richer tooltip generated by scripting,
providing a better explanation to UA's that support it, could and must
be concurrent with the standard practices.

Given a standardized and well-supported DOM API, what are the "standard
practices" you are referring to?

One does not eliminate the other, [...]

And I didn't say that either.


PointedEars

 

[Gabriel Gilini]

No, I am talking about the :hover and :focus CSS pseudo-classes.

Is there a way to feature-test those pseudo-classes? They only work in
anchor elements in IE6 and lower, right?
Anyway, the tooltips are activated by clicking on an icon, not
hovering.

Given a standardized and well-supported DOM API, what are the "standard
practices" you are referring to?

I clearly misunderstood what you were trying to say, but what I meant
was: it's OK to build a rich tooltip, as long as you fall back to a
wider supported method of helping the user if needed.

The tooltips will allow some level of interaction, initially to let
the user tell if it was helpful or not, if he wants to, and also to
let him gather more information if he feels like the initial
explanation wasn't enough.

We are 100% committed to degrading nicely to users who don't support
the features needed. This discussion made me definitely choose against
the IFRAME, given its downsides.

 

[Thomas 'PointedEars' Lahn]

Is there a way to feature-test those pseudo-classes?

ISTM yes, in a way. If after a considerably short enough amount of time the
computed style (or its MSHTML equivalent) of the element does not indicate a
change, one can assume that the pseudo-class is not supported and that CSS
scripting is necessary.

They only work in anchor elements in IE6 and lower, right?

I have not done extensive tests on this, but it sounds about right.

Anyway, the tooltips are activated by clicking on an icon, not
hovering.

In that case you could make the icon a link to an anchor, and the tooltip
the target anchor (ID), or containing the target anchor (name). Then you
could use the :focus pseudo-class of the anchor to show it, and the
`onclick' attribute of the link to show it if :focus is not supported.

I clearly misunderstood what you were trying to say, but what I meant
was: it's OK to build a rich tooltip, as long as you fall back to a
wider supported method of helping the user if needed.

Full ACK.

The tooltips will allow some level of interaction, initially to let
the user tell if it was helpful or not, if he wants to, and also to
let him gather more information if he feels like the initial
explanation wasn't enough.

The respective HTML form can be made part of the tooltip.

We are 100% committed to degrading nicely to users who don't support
the features needed. This discussion made me definitely choose against
the IFRAME, given its downsides.

Good man.


PointedEars

 

[Gabriel Gilini]

ISTM yes, in a way.  If after a considerably short enough amount of time the
computed style (or its MSHTML equivalent) of the element does not indicate a
change, one can assume that the pseudo-class is not supported and that CSS
scripting is necessary.

Hm, I'll try that.

[...]

In that case you could make the icon a link to an anchor, and the tooltip
the target anchor (ID), or containing the target anchor (name).  Then you
could use the :focus pseudo-class of the anchor to show it, and the
`onclick' attribute of the link to show it if :focus is not supported.

That's a great idea! I wouldn't think of this soon enough (maybe in a
couple of years .

Thanks, Thomas, you were very helpful.

 

[kouPhax]

In that case you could make the icon a link to an anchor, and the tooltip
the target anchor (ID), or containing the target anchor (name).  Then you
could use the :focus pseudo-class of the anchor to show it, and the
`onclick' attribute of the link to show it if :focus is not supported.

Apologies for butting in here but I was hoping I could get some
clarification on this technique? I tried to implement this in a very
simple page but clicking a link that jumps to an anchor does not give
the anchor focus (therefore the :hover style is never applied).
Perhaps I am missing something an maybe you could point me in the
right direction? Excuse the primitive code,

<html>
<head>
<style>
#myanchor:focus {
border:1px solid #000;
}
</style>
</head>
<body>
<a href="#myanchor">Set Focus</a>
<a id="myanchor" name="myanchor">This is my tooltip</a>
</body>
</html>

James.

 

[Thomas 'PointedEars' Lahn]

Apologies for butting in here but I was hoping I could get some
clarification on this technique? I tried to implement this in a very
simple page but clicking a link that jumps to an anchor does not give
the anchor focus (therefore the :hover style is never applied).

You meant :focus. And your statement in itself is not overly helpful
because it leaves out all the details of your testing environment; I have
indicated that the feature is not universally supported.

Perhaps I am missing something an maybe you could point me in the
right direction? Excuse the primitive code,

<html>
<head>
<style>
#myanchor:focus {
border:1px solid #000;
}
</style>
</head>
<body>
<a href="#myanchor">Set Focus</a>
<a id="myanchor" name="myanchor">This is my tooltip</a>
</body>
</html>

Turns out it was the :target pseudo-class instead. WFM (with Valid markup)
in Firefox 3.0.9/Linux.

<http://www.w3.org/TR/css3-selectors/#target-pseudo> (WD)


PointedEars