Managing Tool Tips across all devices

Question

Below is a how I would normally setup a tool tip:

[%ToolTip("Access to partners","(i.e partners are readily available)",300,15)%]

They look great on desktops / laptops.

Depending on the width dimension, the tool tip on a mobile phone can require horizontal scrolling.

I'd love a solution that forces the tool tip to wrap around for the smaller dimensions if the screen width is too small.

Is there a better approach to handle tool tips across all devices?

Thanks.

Answer 1

Adding a max-width may be all it takes, but be sure to test all your tool tips on wide and narrow screens to check for any negative consequences of adding this:

<style>
.tool_tip_text {
    max-width: 95% !important;
}
</style>

Comments

Thanks Zachary. This almost got me the full solution.

Adding in the following (as you suggested via email) adjusted the height when the tool tip wrapped around.

<style>
.tool_tip_text {
    max-width: 95% !important;
    height: auto !important;
}
</style>

Many thanks.