Sometimes a label or icon needs one extra line of context, but you do not want to displace the page. Tool tips are perfect for shape hints, functions explanation and subtle onboarding.
In this message we show you how you can make responsive hover/tap tool tips in Divi 5 with interactions. Let’s go there!
What are tool tips (and why they use)?
Tooltips are small messages that appear when you click on a webpage or click on a web page. Move your cursor to a button; A small box can say what it does. Click on an icon and maybe you will see a quick note.
Websites use tool tips to save space. Instead of filling the page with explanation, they only reveal details when needed. Some sites also use them to mark new functions that you might overlook. The best keep the text short, usually under 180 characters.
If well -designed, help tips without standing in the way. They answer quick questions, so that people can easily keep moving through a site.
Tooltips and more, made easy with the interactions of Divi 5
Divi 5 contains a brand new function called interactions that fundamentally change how websites respond to visitors. With interactions you can create dynamic behavior where elements on your page respond to user actions, all without writing code.
The new interactions options are accessible via the advanced tab of each module, row, column or section in Divi’s visual builder.
The system consists of three parts: triggers, effects and goals. Triggers are user actions such as clicks, float or scroll. Effects are what happens, such as showing hidden content, changing colors or moving elements. Goals are the parts of your page that are influenced.
Tool tips are just one use case. The same tools can switch FAQ sections, Animer hero content on scroll and build pop-ups without a custom code.
The interactions work automatically on desktop, tablet and mobile devices.
Build your tool tip in Divi 5
Now that you understand what interactions can do, it’s time to build your first tool tip. The process is simple and entirely within the visual builder of Divi. You work with the same interface that you already know, only with some new options that determine how elements react to user actions.
1. First make your tool tip -content
Before setting up interactions, build in the actual tool tip content on your page. Start by adding a text module to your section and typing your tool tip message. You can also use a icon list module for tool tips. Keep the text and icons short and helpful; About 20 to 30 words work best for most cases.
Style your tool tip to see the part. Give it a background color that stands out from your page, but remains readable. Add 5 to 10 pixels filling, so that the text has a breathing space. Set a Randradius of 8 to 12 pixels for that classic tool tip -bubbell look. You can add a subtle box shadow to lift it off the page.
For text styling, use a font size that is slightly smaller than your body text, about 14 or 15 pixels. Make sure the text color contrasts nicely with your background choice. White or dark text on both dark and light backgrounds works well. You can also use design variables for colors and distance to bind tool tips in the wider styling system of your site.
Use the Admin Label field, such as “Feature Tooltip” for easy identification during installation.
Consider adding visual instructions to the “parent” module where the tool tip can appear. For example, try an underlining for text elements or a subtle background color. These hints tell visitors that extra information is waiting for them.
You can also add adapted CSS to the parent module, so that when they are grown, it is the classic “?” Shows? Cursor, indicating that more information is available.
Go to the advanced settings of the module and set the following CSS:
selector p {
cursor: help;
}
You may need to adjust the code to your module. For example, if your tool tip parent is a button, you would replace it p of button instead of. This is not a required step, but it is a standard setting for tool tips.
2 .. Configuring of interactions and triggers
Now select the module that will activate your tool tip and go to the Advanced tab. Search for the drop -down list interactions at the bottom.
Press “Add interaction” and you will see six trigger options: Click, Mouse Enter, Mouse Exit, Viewport Enter, Viewport Exit and Loading. Go with “Mouse Enter” for a standard hover tool tip.
The interaction editor opens. Name your interaction in the Admin Label field, such as “Toon tool tip.” Your trigger event should show mouse. Since your tool tip is hidden, choose “Show element” for the effect action.
The Target Module drop -down list gives each element on your name page. Find your tool tip here. Good naming is currently pays off. Add a slight delay of 200 to 300 milliseconds, so that the tool tip does not pop up during fast mouse steps. Save the interaction when you’re done.
Make a second interaction to hide the tool tip. Click on “Add interaction”, choose “mouse output” if your trigger, set “hidden element” as the effect and focus on the same tool tip. This deals with the disappearing act when people leave.
Also add a delay of 200 to 300 milliseconds. This prevents the tool tip from disappearing too quickly, making it look shocking.
3. Positioning of your tool tip
After building your tool tip and setting and hiding actions, choose where they appear. In the settings of the Tooltip module, go to advanced> position and switch from standard to absolute.
Absolute positioning places the tool tip compared to the parent container, so the tool tip and trigger remain connected and move together when users scroll. It is therefore of course to drastically change the position of your Tooltip module. We will eventually solve this.
Divi 5 offers vertical and horizontal offset controls to refine the placement of the tool tip. These offsets set how far the tool tip is from the reference point in the container.
But first choose the offset -on sovereign, the angle or edge that acts as the anchor: top, top left, bottom, bottom, bottom left or center, center left, center right.
If the origin is at the top left, offsets measure from the top left corner of the tool tip. If you choose at the bottom right, the same offsets from the right corner of the tool tip measure.
This changes how the offsets influence the position. For example, an origin top left with a horizontal offset of 20 px places the left edge of the Tooltip 20 px of the container edge and an origin top right with a horizontal offset of 20 px places the right edge of the Tooltip 20 px of the container edge.
Working with offset -control elements
If you choose a different alignment than the middle, use the vertical and horizontal offset operation elements to position the tool tip. These offsets set the distance of the tool tip of the chosen origin in the container. For responsive positioning you can use advanced units such as viewport units or percentages instead of pixels.
Viewport units give consistent distance compared to the screen size. A horizontal offset of 3VW keeps the tool tip 3% of the view port width from the reference country, scales over devices. Also make sure that you add a correct Z -index to your tool tip, so that it always appears on top of all elements, below or above.
Place the tool tip about 15-25 px from its trigger to prevent crowds while the connection remains clear.
Negative offsets can turn around, but add mental overhead. Instead, set the origin where you want the tool tip (bottom for above, right by left), so that you can use simple positive offsets.
Once you have decided the exact position and behavior, you hide your Tooltip module by going to the Tooltip module settings panel> Advanced> Interaction and selects “Load” as a trigger, “hidden element” as an effect action and the module itself as the goal. This ensures that the module remains hidden until the parent is transferred.
That’s all, your tool tip is now ready!
Download the Tooltip -Lay -Out
If you want to test the tool tip, download the layout below! Import the file in your divi library, once uploaded, you can gain access to every build that you are working on.
Try interactions in Divi 5 today
Tooltips keep pages clean and readers give the extra detail they need. With interactions in DIVI 5 you can display and hide the content of the tools at Hover or Tap, add a short delay to prevent flicker and to place each tool tip precisely with absolute, offset-on-on and Z-index. The result is consistent in the seven responsive breaking points of Divi 5.
Do you want to go deeper into the position itself? Read the release post of the interactions for an overview of triggers, effects and goals.
#tool #tips #interactions #Divi