Menu icon Foundation
Tooltip width/overflow issue

I am using tooltips on my site but am having some issues when dealing with the tooltip width.

When adding a tooltip with a large browser, if there is a fair amount of text in the tooltip (which is the case for me) the tooltip extends to the width of the browser which I find looks odd.

Screen shot 2014 01 21 at 9.04.09 am

I know that you can set the width by doing the following:

<span data-tooltip data-width="350" class="has-tip" title="Lorem ipsum dolor">Tooltip</span>

However, the issue with this is that if you have an item with a tooltip that is for example on the far right of your browser, the edge of the browser is not detected and the tooltip will overflow past the browser width and add a horizontal scrollbar.

Screen shot 2014 01 21 at 9.12.07 am

Ideally, it would be great if we could include a class with the tooltip so that the width of the tooltip extends to the "left" of the item rather than always to the "right" (or even better yet, detect the edge of the browser window and automatically adjust itself...maybe I'm asking a bit too much ;)

But in the meantime, does anyone by chance have a quick workaround for this?

tooltipFoundation 5

I am using tooltips on my site but am having some issues when dealing with the tooltip width.

When adding a tooltip with a large browser, if there is a fair amount of text in the tooltip (which is the case for me) the tooltip extends to the width of the browser which I find looks odd.

Screen shot 2014 01 21 at 9.04.09 am

I know that you can set the width by doing the following:

<span data-tooltip data-width="350" class="has-tip" title="Lorem ipsum dolor">Tooltip</span>

However, the issue with this is that if you have an item with a tooltip that is for example on the far right of your browser, the edge of the browser is not detected and the tooltip will overflow past the browser width and add a horizontal scrollbar.

Screen shot 2014 01 21 at 9.12.07 am

Ideally, it would be great if we could include a class with the tooltip so that the width of the tooltip extends to the "left" of the item rather than always to the "right" (or even better yet, detect the edge of the browser window and automatically adjust itself...maybe I'm asking a bit too much ;)

But in the meantime, does anyone by chance have a quick workaround for this?

Rafi Benkual over 5 years ago

The tool tips are made to match the viewport width unless you specify a width like you did.

In this example http://cdpn.io/krhEn, you can see the tool tip does not bleed off the page if you do not set a width.

You are better off using a dropdown with hover like so http://cdpn.io/dAvpK