Using iframes to dynamically generate tooltips

Discussion in 'Javascript' started by Gabriel Gilini, May 18, 2009.

  1. 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
    Gabriel Gilini, May 18, 2009
    #1
    1. Advertising

  2. 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, May 18, 2009
    #2
    1. Advertising

  3. 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
    Thomas 'PointedEars' Lahn, May 18, 2009
    #3
  4. On May 18, 2:11 pm, 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?
    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
    Gabriel Gilini, May 18, 2009
    #4
  5. 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
    Thomas 'PointedEars' Lahn, May 18, 2009
    #5
  6. On May 18, 2:48 pm, 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? 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
    Gabriel Gilini, May 18, 2009
    #6
  7. 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
    Thomas 'PointedEars' Lahn, May 18, 2009
    #7
  8. On May 18, 5:14 pm, Thomas 'PointedEars' Lahn <>
    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
    Gabriel Gilini, May 18, 2009
    #8
  9. Gabriel Gilini

    kouPhax Guest

    On May 18, 9:14 pm, 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).
    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.
    kouPhax, May 19, 2009
    #9
  10. 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
    Thomas 'PointedEars' Lahn, May 19, 2009
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Frank
    Replies:
    2
    Views:
    498
    BootNic
    Dec 7, 2006
  2. Peter Müller
    Replies:
    14
    Views:
    1,336
    Ole Streicher
    Jun 17, 2008
  3. Ravikanth
    Replies:
    3
    Views:
    585
    Kevin Walzer
    Jul 7, 2011
  4. shira

    using tooltips in DevExpress Xtragrid

    shira, Feb 24, 2005, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    617
    shira
    Feb 24, 2005
  5. Dan
    Replies:
    0
    Views:
    262
Loading...

Share This Page