Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   Javascript (http://www.velocityreviews.com/forums/f68-javascript.html)
-   -   Using iframes to dynamically generate tooltips (http://www.velocityreviews.com/forums/t938640-using-iframes-to-dynamically-generate-tooltips.html)

Gabriel Gilini 05-18-2009 04:38 PM

Using iframes to dynamically generate tooltips
 
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

--
Gabriel Gilini

Thomas 'PointedEars' Lahn 05-18-2009 05:03 PM

Re: Using iframes to dynamically generate tooltips
 
Gabriel Gilini wrote:
> 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 05-18-2009 05:11 PM

Re: Using iframes to dynamically generate tooltips
 
Thomas 'PointedEars' Lahn wrote:
> 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 05-18-2009 05:32 PM

Re: Using iframes to dynamically generate tooltips
 
On May 18, 2:11*pm, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
> Thomas 'PointedEars' Lahn wrote:
> > 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.


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.

--
Gabriel Gilini

Thomas 'PointedEars' Lahn 05-18-2009 05:48 PM

Re: Using iframes to dynamically generate tooltips
 
Gabriel Gilini wrote:
> Thomas 'PointedEars' Lahn wrote:
>> Thomas 'PointedEars' Lahn wrote:
>>> 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.

>
> 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 05-18-2009 07:56 PM

Re: Using iframes to dynamically generate tooltips
 
On May 18, 2:48*pm, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
> Gabriel Gilini wrote:
> > Thomas 'PointedEars' Lahn wrote:
> >> Thomas 'PointedEars' Lahn wrote:
> >>> 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.

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


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.

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


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.

--
Gabriel Gilini

Thomas 'PointedEars' Lahn 05-18-2009 08:14 PM

Re: Using iframes to dynamically generate tooltips
 
Gabriel Gilini wrote:
> Thomas 'PointedEars' Lahn wrote:
>> Gabriel Gilini wrote:
>>> Thomas 'PointedEars' Lahn wrote:
>>>> Thomas 'PointedEars' Lahn wrote:
>>>>> 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.
>>> 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.

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

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

>
> 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 05-18-2009 08:27 PM

Re: Using iframes to dynamically generate tooltips
 
On May 18, 5:14*pm, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
> Gabriel Gilini wrote:
> > Thomas 'PointedEars' Lahn wrote:
> >> Gabriel Gilini wrote:
> >>> Thomas 'PointedEars' Lahn wrote:
> >>>> Thomas 'PointedEars' Lahn wrote:
> >>>>> 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.
> >>> 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.

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


Hm, I'll try that.

[...]
> > 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.


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.

--
Gabriel Gilini

kouPhax 05-19-2009 12:40 PM

Re: Using iframes to dynamically generate tooltips
 
On May 18, 9:14*pm, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:

> 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 05-19-2009 12:51 PM

Re: Using iframes to dynamically generate tooltips
 
kouPhax wrote:
> Thomas 'PointedEars' Lahn wrote:
>> 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).


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


All times are GMT. The time now is 03:25 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.