Handle the case where tooltip is inside of an overflow:hidden container

[tihoni]

I would be great to have a solution for this: https://jsfiddle.net/tihoni/nnyk25sL/

Label: Enhancement

[konekoya]

I don't think it's possible with pure CSS.. Why not just remove the overflow: hidden prop from that div?

[tihoni]

Well, vertical screen real estate is very precious in certain cases. Imagine having to display something like this: https://jsfiddle.net/tihoni/fge2v49p/

[mathetos]

I think that's a pretty unreasonable (most likely impossible) request for pure CSS. You could choose to align all those tooltips to the left of each icon instead.

[tihoni]

It's not a request, but a statement; "it would be great to have solution for this". I apologize if I was unclear.

Currently, I'm using Bootstrap JS tooltips, and their way around this tooltip cutting is by specifying the tooltip container, like, for instance "body", after which the tooltip is appended to the DOM, and it's absolutely positioned.

Now, without JS, it is, as far as I know, impossible to: a) traverse the DOM using CSS selectors outside of siblings and children, and b) dynamically set CSS properties (like 'left', 'top') on a target element, relative to a source element.

...in order to [warning, Sci-Fi] use pseudo :hover on the icon to reveal the tooltip on a "parent-sibling" node and (maybe) pass the x,y of the icon. Think along the lines:

<div id="container-with-overflow">
    <span id="XYZ" class="icon-with-detached-tooltip"></span>
</div>
<div class="tooltip-collection">
    <a data-tooltip-id="XYZ" class="status-icon hint--error" aria-label="This is an error tooltip">
</div>

...with the "CSS5?" selector: .icon-with-detached-tooltip:hover < div + div.tooltip-collection a['data-tooltip-id'=%[id]] { visibility: visible; opacity: 1; left: %{left}; top: %{top}; }

So I'm just spitballing here, coming up with a syntax on the fly to illustrate my point. Like, similarly to div>span selecting span children of divs, div<span would select div parents of spans. % would be an equivalent of JS's "this", as in the root selector (.icon-with-detached-tooltip in this case).

I don't know, just wanted to see if this would spark some ideas with the CSS crowd :)

[chinchang]

@tihoni This is definitely one of the biggest drawback in CSS tooltips currently and as you said, we can hope this discussion becomes a base for some new features in coming CSS :)

As far as this issue is concerned, I can only think of just one way to solve this with current feature set. Fixed position elements don't clip inside overflow hidden parent. So we could have a different type of information system wherein tooltips always show in the bottom right corner of screen like http://codepen.io/chinchang/pen/vXgGoA

This is something I have wanted to implement anyways as an additional feature (#46) in Hint.css.

[tihoni]

@chinchang That's a great idea!

I whipped up a quick POC by adding .hint-fixed to the tooltip and positioning them for this demo. http://codepen.io/tihoni/pen/XjpZLj

[chinchang]

@tihoni But to show tooltips alongside elements you had to hardcode positions of tooltips which is not scalable and robust. It can break with responsiveness. That is why with fixed positioning, showing all tooltips at a single location is better.