Divi 5 keeps turning common custom-code workflows into native builder choices, and the new Tooltip module is a brilliant example. It implies that you’ll be able to add a floating popup panel beside each and every different part and regulate its content material subject matter, purpose, position, movement, arrow, timing, and styling visually.
As a substitute of wiring up a tooltip library by means of hand, you’ll have the ability to place a Tooltip module all over the part it describes, add text or nested modules, and decide whether or not or no longer the tooltip turns out on hover, on click on on, or always.
That makes it useful for short hints, feature explanations, product details, icon labels, mini promo taking part in playing cards, looped content material subject matter, and contextual callouts that need additional flexibility than a elementary browser tooltip.
In this publish, we’ll check out what the Tooltip module is, learn the way to add it, how its settings art work, and where it’ll perhaps toughen a Divi 5 structure without together with litter.
What Is The Tooltip Module In Divi 5?
The Tooltip module is a nestable content material subject matter container that appears beside a mum or dad part. The mum or dad part becomes the tooltip’s anchor, and the Tooltip module holds the popup content material subject matter.
In good words, you add the Tooltip module as a child of the part it will have to describe. That mum or dad part could be a button, icon, image, text module, pricing feature, product card, or another part that desires further context.
Thru default, the tooltip shows on hover, turns out as regards to the absolute best center of its anchor, and uses a small arrow to suggest once more to the part it describes. If you’re designing, you’ll have the ability to turn on Energy Visible throughout the Meta selection staff so the tooltip stays visible on the canvas.
This is different from a browser identify feature or a simple text-only hint. The Tooltip module can include rich text and nested modules, so the popup can also be as simple as one sentence or as rich as a small card with text, an icon, an image, a button, or other Divi content material subject matter.
That flexibility comes in handy, then again it will have to be utilized in moderation. A tooltip will have to add context, not hide information the internet web page will have to make sense.
How To Add A Tooltip Module
Get began by means of deciding which part will have to purpose or anchor the tooltip. The Tooltip module will have to be situated inside that part so it’s acutely aware of what to suggest to.
You’ll have the ability to add it in either one of the ones techniques:
- Correct-click way: Correct-click the part, choose Add Phase, then choose Add Inside.
- Settings panel way: Open the part settings, transfer to Content material subject matter > Portions, then click on on Add New Phase.
Search for Tooltip and add the module.
Once added, the Tooltip module is tied to its mum or dad part. That mum or dad acts for the reason that anchor, while the tooltip content material subject matter floats beside it in step with the settings you choose.
This is similar in spirit to creating a tooltip with Divi 5’s Interactions, then again the Tooltip module handles the common tooltip behavior for you. You don’t need to manually organize separate interaction triggers, function elements, positioning, and show/hide effects for the usual tooltip.
Understanding The Tooltip Module Settings
The Tooltip module settings are organized into the standard Divi tabs: Content material subject matter, Design, and Advanced.
The Content material subject matter tab handles the tooltip content material subject matter and same old module possible choices. The Design tab controls behavior and styling. The Advanced tab handles attributes, necessities, visibility, interactions, position, and other complicated controls.
Content material subject matter Tab
The Content material subject matter tab is where you add the content material subject matter that appears all over the tooltip. The main selection groups include:
- Text: Add and edit the tooltip’s rich text content material subject matter.
- Link: Make the tooltip module link to a internet web page, section, or external URL.
- Portions: Add nested modules all over the tooltip.
- Background: Set a background color, gradient, image, or video for the tooltip.
- Loop: Repeat tooltip content material subject matter from a data provide when used in dynamic layouts.
- Order: Regulate module order when content material subject matter is generated dynamically.
- Meta: Rename the module throughout the builder and turn on Energy Visible while designing.
Energy Visible throughout the Meta settings is especially useful. For the reason that tooltip is hidden until led to on the front end, turning on Energy Visible implies that you’ll be able to see the panel when you style it throughout the Visual Builder.
Show Tooltip On
The main number one behavior environment, which you’ll have the ability to find throughout the design tab’s Tooltip selection staff, is Show Tooltip On. It controls how the tooltip turns out.
You’ll be in a position to choose from:
- Hover: Displays the tooltip when the client hovers over the mum or dad part.
- Click on on: Displays the tooltip when the client clicks the mum or dad part.
- At all times: Assists in keeping the tooltip visible without requiring hover or click on on.
Hover works well for short, purely informational hints on desktop. Click on on is maximum steadily upper when the tooltip contains interactive content material subject matter, comparable to a link or button, or when the experience will have to art work upper on touch units. At all times comes in handy when the tooltip is being treated additional like a permanent callout or label.
Tooltip Movement
Tooltip Movement controls whether or not or no longer the tooltip stays anchored or follows the cursor.
The two movement possible choices are:
- Anchored: Assists in keeping the tooltip positioned relative to the mum or dad part.
- Follow Cursor: Makes the tooltip follow the client’s cursor while interacting with the mum or dad part.
Anchored is the best default for plenty of exact builds because it keeps the structure predictable. Follow Cursor can art work well for playful hover states, interactive graphics, maps, product callouts, or visual elements where cursor movement is part of the experience.
Tooltip Position
Tooltip Position controls where the tooltip turns out in terms of its mum or dad part.
The positioning grid implies that you’ll be able to choose the threshold and alignment. For example, you’ll have the ability to place the tooltip above the purpose, underneath it, to the left, to the proper, or aligned along one of those edges.
This will give you common tooltip placements without writing positioning CSS. If the tooltip will have to avoid shut by means of content material subject matter, have compatibility inside a card, or degree against a selected part of the purpose, get began with the site grid.
Tooltip Skid And Tooltip Distance
After choosing the primary position, you’ll have the ability to refine the placement with Tooltip Skid and Tooltip Distance.
Tooltip Skid shifts the tooltip along the threshold of the mum or dad part. If the tooltip sits above or underneath the purpose, skid moves it horizontally. If the tooltip sits to the left or correct, skid moves it vertically.
Tooltip Distance controls the gap between the mum or dad part and the tooltip. Build up it when the tooltip needs additional breathing room. Decrease it when the tooltip will have to take a seat down closer to the purpose.
Open And Close Prolong
The Tooltip module moreover accommodates prolong controls for opening and closing.
Tooltip Open Prolong controls how long the module waits forward of showing the tooltip. A small prolong can prevent tooltips from appearing every time a cursor briefly passes over a purpose.
Tooltip Close Prolong controls how long the tooltip stays visible after the purpose is not full of life. This may occasionally make the interaction in reality really feel a lot much less twitchy, in particular when the tooltip contains content material subject matter the client would perhaps wish to be told or switch against.
Use delays subtly. Long delays may just make a tooltip in reality really feel unresponsive, while no prolong may just make a internet web page with many triggers in reality really feel too busy.
Tooltip Arrow
The tooltip arrow helps visually connect the popup to the part it describes.
Turn on Show Tooltip Arrow to turn the pointer. Then alter:
- Tooltip Arrow Color: Have compatibility it to the tooltip background so the arrow feels hooked as much as the panel.
- Tooltip Arrow Placement: Make a choice which side of the tooltip the arrow turns out on.
- Tooltip Arrow Position: Switch the arrow along that side.
- Tooltip Arrow Size: Regulate how large the arrow turns out.
A small, color-matched arrow maximum steadily feels stylish and clean. A larger arrow can art work for a additional playful speech-bubble style.
Style The Tooltip Panel
Previous the Tooltip behavior staff, the Design tab accommodates same old styling groups for the panel itself. You’ll have the ability to alter:
- Construction: Regulate how nested modules all over the tooltip are arranged.
- Body Text: Style the tooltip text.
- Sizing: Set the tooltip width, max width, most sensible, and alignment.
- Spacing: Regulate padding and margin.
- Border: Add border types and rounded corners.
- Box Shadow: Add depth around the popup.
- Filters: Practice visual filter effects.
- Become: Scale, rotate, switch, or skew the tooltip.
- Animation: Add motion when the tooltip turns out.
For plenty of designs, get began with width, padding, background, border radius, text styling, and a mild shadow. Tooltips art work absolute best when they in reality really feel lightweight and easy to be told.
Assemble Examples
The Tooltip module is Most worthy when it reduces visible litter while nevertheless keeping helpful information on the subject of the part that desires it.
Pricing Table Feature Clarifiers
Pricing tables often need temporary explanations without turning every row proper right into a paragraph. Add a small knowledge icon next to a feature label, or use the feature text itself for the reason that anchor, then place a Tooltip module inside it.
The tooltip can give an explanation for what a feature accommodates, define a limit, provide an explanation for billing words, or ground temporary excellent print without making all the table taller.
Keep pricing tooltips concise. If the rationale needs a lot of paragraphs, it maximum indubitably belongs throughout the internet web page content material subject matter or a faithful FAQ section as an alternative.
Icon Labels And Image Hotspots
The Tooltip module works well for icon-based interfaces and image callouts. Add a Tooltip module inside an icon, button, hotspot marker, or image part to turn a short lived label or rationalization. Use this for:
- Feature diagrams
- Product details
- Map problems
- Portfolio annotations
- Dashboard-style layouts
A cursor-following tooltip can in reality really feel attractive for visual diagrams, while anchored positioning is maximum steadily upper for clean product or feature explanations.
Tooltips Inside A Loop
Tooltips may also be useful inside looped layouts. A loop can render posts, products, staff participants, portfolio entries, puts, or other repeated content material subject matter, and every products can include its non-public Tooltip module.
A blog card, for instance, can show the featured image, identify, author, and date, while the tooltip reveals tags, categories, finding out time, or a short lived excerpt. A product card can use a tooltip for specs, availability, delivery notes, or rapid details.
The convenience is that you simply design the tooltip once all over the loop products, then let dynamic content material subject matter populate the repeated instances.
Easiest Practices For Tooltip Design
Tooltips are useful because of they maintain out of the easiest way until sought after. That also manner they will have to be selective, clear, and easy to purpose.
- Use hover for short hints: Hover works well for simple desktop-only explanations.
- Use click on on for interactive content material subject matter: If the tooltip contains a link, button, or nested module, click on on is maximum steadily a better purpose.
- Keep content material subject matter concise: Tooltips will have to give an explanation for or provide an explanation for, not trade number one internet web page content material subject matter.
- Use a visible cue: Icons, underlined words, badges, or hotspots have the same opinion visitors know a tooltip exists.
- Don’t hide crucial information: Essential disclaimers, navigation, pricing necessities, or instructions will have to not live only inside a tooltip.
- Take a look at mobile behavior: Hover does not translate cleanly to touch units, so take a look at tablet and make contact with views.
- Preview while designing: Turn on Energy Visible throughout the Meta selection staff so that you’ll have the ability to style the tooltip on the canvas.
- Have compatibility the arrow and background: A color-matched arrow maximum steadily makes the tooltip in reality really feel additional polished.
- Keep spacing generous: Enough padding and line most sensible make small tooltip panels easier to be told.
Accessibility And SEO Notes
Tooltip content material subject matter is maximum steadily hidden until led to. That makes it a poor place for the remaining the client will have to understand forward of taking movement.
Use tooltips as cutting edge enhancement. The internet web page will have to nevertheless make sense when every tooltip is closed. A tooltip can add helpful context, then again the primary content material subject matter, navigation, pricing, and required instructions will have to keep visible or in the market via a additional loyal construction.
For accessibility, avoid relying on hover by myself for vital information. Ensure that the purpose is plain, take a look at keyboard and make contact with behavior, and use click on on triggers when the tooltip accommodates interactive content material subject matter.
For SEO, don’t place content material subject matter you wish to have indexed only inside a tooltip. If a paragraph problems for search, internet web page building, or shopper understanding, keep it throughout the visible internet web page content material subject matter.
Take a look at The New Divi 5 Tooltip Module In recent times!
The Tooltip module in Divi 5 eliminates a common need for custom tooltip libraries, snippets, or further plugins. It’ll come up with a neighborhood way so that you can upload contextual floating content material subject matter with visual controls for triggers, placement, movement, prolong, arrows, content material subject matter, and styling.
Use it for short hints, pricing clarifiers, form notes, image hotspots, looped taking part in playing cards, and compact promo panels. Keep the content material subject matter selective, choose the proper purpose, and take a look at the experience all over units.
Finished well, tooltips make a structure in reality really feel cleaner without making vital information more difficult to hunt out.
The publish Exploring Divi 5’s New Tooltip Module gave the impression first on Chic Topics Weblog.
0 Comments