Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
tihoni opened this issue Sep 21, 2016 · 7 comments
Open

Comments

@tihoni
Copy link

tihoni commented Sep 21, 2016

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

Label: Enhancement

@konekoya
Copy link

konekoya commented Sep 22, 2016

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

@tihoni
Copy link
Author

tihoni commented Sep 22, 2016

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

@mathetos
Copy link

mathetos commented Sep 22, 2016

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
Copy link
Author

tihoni commented Sep 22, 2016

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
Copy link
Owner

chinchang commented Sep 22, 2016

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

@chinchang chinchang added the faq label Sep 22, 2016
@tihoni
Copy link
Author

tihoni commented Sep 22, 2016

@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
Copy link
Owner

chinchang commented Sep 23, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants