W3C home > Mailing lists > Public > www-style@w3.org > April 2012

Re: Fwd: [css4-ui] ::tooltip

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Wed, 11 Apr 2012 21:21:17 -0700
Message-ID: <CALRQH7_itftFhajtmTKhsysiLNwkGevzdBSG_VVgkxmNCr5voQ@mail.gmail.com>
To: Lea Verou <leaverou@gmail.com>
Cc: www-style@w3.org
On Wed, Apr 11, 2012 at 8:09 PM, Lea Verou <leaverou@gmail.com> wrote:
> This is not how pseudo-classes work. If you disagree with the way
> pseudo-classes work in CSS, please start another thread about it and don't
> hijack this one. Thanks.

What do you mean exactly? Where and with what I disagreed?

> With the way CSS currently works, `:tooltip` is equivalent to `*:tooltip`,
> which means "any element, when at the tooltip state" (however that tooltip
> state is defined). It cannot refer to different containers, such as
> tooltips. Pseudo-classes are used to classify elements, not to style
> something else. [1]

I believe you get all this somehow fuzzy.

::tooltip is a pseudo element - it could be some part of the element as ::marker
      or auto-generated elements like ::after and ::before for example.

:tooltip is a pseudo class that matches (any) element in "tooltip
state" - element
     for which popup window is created to show it.

These are quite different cases.

> `:tooltip` might be reasonable when using another element as a tooltip, like
> some people in the thread already suggested. However, there are more
> efficient ways to refer to that, and we still need a way to style native,
> UA-generated tooltips without having to create a custom one for everything.

Ideally we should have one mechanism that covers all use cases, not two of them.

This for example:

    div[title] -> :tooltip { background:gold; font-size: x-large;  }

does exactly as yours:

   div[title]::tooltip { background:gold; font-size: x-large;  }

but also to allows to style things like:

div[title] > div.info  { background:gold;
                               font-size: normal; position:absolute;
                               display:block; }

div[title] > div.info:tooltip  { background:gold; font-size: x-large;  }

when the same element is used as a tooltip *and* as a context info.

Think about touch devices that may require to show the same
information but using different mechanisms/styling. There is
no such thing as ::tooltip element on pointer-less devices
in principle, right?

> [1]: http://www.w3.org/TR/CSS21/selector.html#pseudo-elements
> Lea Verou (http://lea.verou.me | @LeaVerou)
> On 11/4/12 19:54, Andrew Fedoniouk wrote:
>> There is one tooltip on the screen at any given moment of time so :tooltip
>> { background:gold; } will work just fine. If you want different styling for
>> different elements then we can use shadow tree combinator/selector here:
>> div[title] -> :tooltip { background: gold; } div[title] -> :tooltip {
>> background: green; } where '->' is that shadow tree combinator (does not
>> exist yet but it seems we are getting there). -- Andrew Fedoniouk.
>> http://terrainformatica.com

Andrew Fedoniouk.

Received on Thursday, 12 April 2012 04:21:47 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:57 UTC