How can I prevent wordpress tooltips from positioning themselves outside the screen on small screens?

Hi dear wordpress tooltips plugin users, I hope this message find you are doing well and having wonderful weekend with your loved ones We have received a ticket from a new user of wordpress tooltip plugin, he asked:

Hi
The tooltips positions themselves outside the screen on small screens.

Do you have any plans on fixing that issue?

We believe that there are may be more users have similar questions, so we’d like to publicly  document to solution here 🙂

How can I prevent wordpress tooltips from positioning themselves outside the screen on small screens?

1 If you haven’t installed the pro version of WordPress Tooltips, kindly log in to your account on the WordPress Tooltip Plugin website at tooltip.org. Otherwise, please refer to step #11.

2 Proceed to the ‘My Account’ page and download the WordPress Glossary Tooltip Plugin.

3 Now, let’s continue with the installation process!

4 Login to your WordPress admin area as an administrator.

5 Click on the ‘Plugins’ option in the  dashboard.

6 Deactivate any previous versions of the tooltip plugin, if you have any.

7 Completely remove the old WordPress Tooltip plugin.

8 Still in the ‘Plugins’ menu, select ‘Add New’ at the top of the plugins panel.

9 Upload the tooltip plugin zip file that you downloaded from the WordPress Glossary Plugin site.

10 Activate the latest version of the WordPress Tooltip Glossary plugin. Well done! Now, let’s customize the style of the tooltips

11 Click on the ‘Tooltips’ option

12 From the drop-down menu, choose ‘Tooltip Style’. This will open the ‘Tooltip Style’ panel, as shown in the following screenshot:

Screenshot: Tooltips Style Panel in WordPress Tooltips Pro Plus 28.2.8

13 In this panel, you can find options to adjust the tooltip position, title font color, title font size, background color, and much more! You have the freedom to customize every aspect of the WordPress Tooltip according to your preferences. How exciting is that?

14 In the style settings panel, you’ll find the “Tooltip Box Position” option, which offers various positioning choices such as bottomRight, bottomLeft, topRight, topLeft, topMiddle, bottomMiddle, rightMiddle, and leftMiddle…

Our WordPress Tooltip plugin provides the convenient feature of automatic positioning. Let us explain how it works with a couple of examples.

If you select the ‘topMiddle’ position for the tooltip box, it will intelligently appear at the top center of the tooltip keyword on the front end. Similarly, if you choose the ‘bottomMiddle’ position, the tooltip box will be displayed at the bottom center of the tooltip keyword.

We’ve developed this feature to ensure that your tooltips seamlessly align with the intended context, resulting in a smooth and intuitive user experience.

Our suggestion is to select the option “bottomMiddle” or ‘topMiddle’

15 Now, please check the option ” Tooltip Box Width” in wordpress tooltip style settings panel, You can customize the width of tooltip here, for example, “600” means “600px” for tooltip popup box.

However, on a small screen, if the tooltip box is set to 600px, the tooltip’s position may exceed the width of the small screen.

Our suggestion is to select the option “auto”

“auto” means, the width of the tooltip box will be determined automatically according to what you enter

16 In general, this will solve the problem of “the tooltips positions themselves outside the screen on small screens”, In wordpress tooltips plugin, we offer a tooltip custom coder for tooltip admin to customize the tooltip style, it looks like this:

tooltip glossary custom coder

In tooltips custom coder, you can custom the style of tooltip box, a simple example of codes looks like this: