Material-design-lite: Tooltips are clipped on card boundaries

[ithinkihaveacat]

If tooltips overflow the edge of a card, they are truncated. I think it would be better for them to overhang the card, if they are otherwise visible.

[addyosmani]

Imo, overhanging would make better sense here. We should probably get UX input on the correct behaviour just to be sure though. To the best of my knowledge this isn't well defined in the spec atm.

[Garbee]

I think this probably has to do with the overflow hidden applied to cards.

Overall, I'd personally like to see if we couldn't get tooltips to detect boundaries and re-position accordingly so they fit within the boundary. Overflowing the card for tooltips would seem odd when nothing else would do that.

[tleunen]

Yes it's because of the overflow hidden. But I think we should keep this behavior.
But I would not re-position the tooltip in this context. Instead I'd make it appear on top of the card.
Some other elements like the DropDown menu would also need to be displayed like that. So the tooltip won't be the only element in this situation ;)

[jabbett]

Any recommended CSS hack in the meantime?

[KristerV]

.mdl-card {
    overflow: visible;
    z-index: auto;
}

Seems to do the trick just fine. Not sure why the card needs it's z-index reset. may cause problems later, we'll see.

In my case it's the menu and the menu expands through the bottom - can't be fixed with autopositioning. The menu just doesn't fit in my card.

though it's strange, that this doesn't seem to be an issue in the official demo..
edit: oh, that's because it's not using the card..

[sgomes]

Keeping this behaviour, for backwards compatibility. Setting a overflow: visible override should be an easy fix.