Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Detect when a tooltip do not fit in the screen/iframe

Hi! I'm trying to detect when a tooltip with HTML doesn't fit in the screen or iframe... For example a image is too big, or many text, etc.

Can I detect it with any event?


  • edited October 2015
    If you're using HTML you could make it responsive, just like you would with a responsive website, so that it scales to stay within the viewport.

    For example, insert something like this:
    div.goes-into-tooltip {
    max-width: 100%;
    min-width: 300px;

    div.goes-into-tooltip img {
    max-width: 100%;
    That'll get you a tooltip that'll never be wider than the viewport, with images resizing to fit. It'll still overflow vertically, but that should be something you can scroll to.

    Alternatively, if a tooltip contains a lot of text you could limit its height using something like max-height: 300px; overflow: auto; on the content you insert. That'll create a scrollbar in the tooltip.
Sign In or Register to comment.