Feel free to change the viewport's dimensions and see how the tooltips adjust to avoid overflowing.

The source code can be found at https://github.com/PedroHenriques/CSS_JS_ToolTips.

Tooltip text goes here.
It can contain any valid HTML tag to help setup the text.

This is the default tooltip style. Hover Me!

This tooltip will use an arrow to help identify where it came from.
This is a long enough text that it should trigger the tooltip to move from the default position. Hover Me!

This one will be moved to the left, in order to not overflow the viewport. Hover Me!

Tooltip text goes here. Hover Me!

This tooltip has an extra custom class that changes the style.
These tooltips are fully customizable by you! Hover Me!

This tooltip has an extra class that adds the information button and changes the cursor icon. Now using a different image.
Easy and fast to customize to your needs!