Divi 5 helps to keep turning commonplace custom-code workflows into local builder options, and the brand new Tooltip module is a great instance. It means that you can upload a floating popup panel beside every other component and keep watch over its content material, cause, place, motion, arrow, timing, and styling visually.
As an alternative of wiring up a tooltip library by way of hand, you’ll be able to position a Tooltip module throughout the component it describes, upload textual content or nested modules, and come to a decision whether or not the tooltip seems on hover, on click on, or all the time.
That makes it helpful for brief hints, characteristic explanations, product main points, icon labels, mini promo playing cards, looped content material, and contextual callouts that want extra flexibility than a fundamental browser tooltip.
On this submit, we’ll take a look at what the Tooltip module is, find out how to upload it, how its settings paintings, and the place it will possibly make stronger a Divi 5 format with out including muddle.
Contents
What Is The Tooltip Module In Divi 5?
The Tooltip module is a nestable content material container that looks beside a dad or mum component. The dad or mum component turns into the tooltip’s anchor, and the Tooltip module holds the popup content material.
In sensible phrases, you upload the Tooltip module as a kid of the component it must describe. That dad or mum component may well be a button, icon, symbol, textual content module, pricing characteristic, product card, or some other component that wishes additional context.
Through default, the tooltip displays on hover, seems close to the highest heart of its anchor, and makes use of a small arrow to indicate again to the component it describes. If you are designing, you’ll be able to activate Power Visual within the Meta choice crew so the tooltip remains visual at the canvas.
That is other from a browser name characteristic or a easy text-only trace. The Tooltip module can comprise wealthy textual content and nested modules, so the popup will also be so simple as one sentence or as wealthy as a small card with textual content, an icon, a picture, a button, or different Divi content material.
That flexibility turns out to be useful, however it must be used in moderation. A tooltip must upload context, now not conceal data the web page must make sense.
How To Upload A Tooltip Module
Get started by way of deciding which component must cause or anchor the tooltip. The Tooltip module must be positioned within that component so it is aware of what to indicate to.
You’ll be able to upload it in both of those tactics:
- Proper-click approach: Proper-click the component, make a choice Upload Part, then make a choice Upload Inside of.
- Settings panel approach: Open the component settings, move to Content material > Parts, then click on Upload New Part.
Seek for Tooltip and upload the module.
As soon as added, the Tooltip module is tied to its dad or mum component. That dad or mum acts because the anchor, whilst the tooltip content material floats beside it in keeping with the settings you select.
This is identical in spirit to making a tooltip with Divi 5’s Interactions, however the Tooltip module handles the average tooltip conduct for you. You don’t want to manually arrange separate interplay triggers, goal components, positioning, and display/conceal results for the standard tooltip.
Figuring out The Tooltip Module Settings
The Tooltip module settings are arranged into the usual Divi tabs: Content material, Design, and Complex.
The Content material tab handles the tooltip content material and usual module choices. The Design tab controls conduct and styling. The Complex tab handles attributes, prerequisites, visibility, interactions, place, and different complex controls.
Content material Tab
The Content material tab is the place you upload the content material that looks throughout the tooltip. The primary choice teams come with:
- Textual content: Upload and edit the tooltip’s wealthy textual content content material.
- Hyperlink: Make the tooltip module hyperlink to a web page, phase, or exterior URL.
- Parts: Upload nested modules throughout the tooltip.
- Background: Set a background coloration, gradient, symbol, or video for the tooltip.
- Loop: Repeat tooltip content material from an information supply when utilized in dynamic layouts.
- Order: Keep watch over module order when content material is generated dynamically.
- Meta: Rename the module within the builder and activate Power Visual whilst designing.
Power Visual within the Meta settings is particularly helpful. Because the tooltip is hidden till caused at the entrance finish, turning on Power Visual means that you can see the panel whilst you genre it within the Visible Builder.
Display Tooltip On
The primary primary conduct atmosphere, which you’ll be able to in finding within the design tab’s Tooltip choice crew, is Display Tooltip On. It controls how the tooltip seems.
You’ll be able to make a choice from:
- Hover: Presentations the tooltip when the customer hovers over the dad or mum component.
- Click on: Presentations the tooltip when the customer clicks the dad or mum component.
- All the time: Helps to keep the tooltip visual with out requiring hover or click on.
Hover works smartly for brief, purely informational hints on desktop. Click on is most often higher when the tooltip accommodates interactive content material, corresponding to a hyperlink or button, or when the enjoy must paintings higher on contact gadgets. All the time turns out to be useful when the tooltip is being handled extra like an everlasting callout or label.
Tooltip Motion
Tooltip Motion controls whether or not the tooltip remains anchored or follows the cursor.
The 2 motion choices are:
- Anchored: Helps to keep the tooltip situated relative to the dad or mum component.
- Apply Cursor: Makes the tooltip apply the customer’s cursor whilst interacting with the dad or mum component.
Anchored is the most efficient default for many actual builds as it helps to keep the format predictable. Apply Cursor can paintings smartly for frolicsome hover states, interactive graphics, maps, product callouts, or visible components the place cursor motion is a part of the enjoy.
Tooltip Place
Tooltip Place controls the place the tooltip seems on the subject of its dad or mum component.
The location grid means that you can make a choice the brink and alignment. As an example, you’ll be able to position the tooltip above the cause, under it, to the left, to the correct, or aligned alongside a kind of edges.
This will provide you with commonplace tooltip placements with out writing positioning CSS. If the tooltip must keep away from close by content material, are compatible within a card, or level towards a particular a part of the cause, get started with the location grid.
Tooltip Skid And Tooltip Distance
After opting for the principle place, you’ll be able to refine the position with Tooltip Skid and Tooltip Distance.
Tooltip Skid shifts the tooltip alongside the brink of the dad or mum component. If the tooltip sits above or under the cause, skid strikes it horizontally. If the tooltip sits to the left or proper, skid strikes it vertically.
Tooltip Distance controls the space between the dad or mum component and the tooltip. Building up it when the tooltip wishes extra respiring room. Lower it when the tooltip must sit down nearer to the cause.
Open And Shut Lengthen
The Tooltip module additionally comprises lengthen controls for opening and shutting.
Tooltip Open Lengthen controls how lengthy the module waits ahead of appearing the tooltip. A small lengthen can save you tooltips from showing each and every time a cursor in short passes over a cause.
Tooltip Shut Lengthen controls how lengthy the tooltip remains visual after the cause is now not lively. This may make the interplay really feel much less twitchy, particularly when the tooltip accommodates content material the customer would possibly need to learn or transfer towards.
Use delays subtly. Lengthy delays could make a tooltip really feel unresponsive, whilst no lengthen could make a web page with many triggers really feel too busy.
Tooltip Arrow
The tooltip arrow is helping visually attach the popup to the component it describes.
Activate Display Tooltip Arrow to show the pointer. Then modify:
- Tooltip Arrow Colour: Fit it to the tooltip background so the arrow feels hooked up to the panel.
- Tooltip Arrow Placement: Select which facet of the tooltip the arrow seems on.
- Tooltip Arrow Place: Transfer the arrow alongside that facet.
- Tooltip Arrow Measurement: Keep watch over how huge the arrow seems.
A small, color-matched arrow most often feels fashionable and blank. A bigger arrow can paintings for a extra playful speech-bubble genre.
Taste The Tooltip Panel
Past the Tooltip conduct crew, the Design tab comprises usual styling teams for the panel itself. You’ll be able to modify:
- Structure: Keep watch over how nested modules throughout the tooltip are organized.
- Frame Textual content: Taste the tooltip textual content.
- Sizing: Set the tooltip width, max width, top, and alignment.
- Spacing: Alter padding and margin.
- Border: Upload border kinds and rounded corners.
- Field Shadow: Upload intensity across the popup.
- Filters: Observe visible filter out results.
- Turn into: Scale, rotate, transfer, or skew the tooltip.
- Animation: Upload movement when the tooltip seems.
For many designs, get started with width, padding, background, border radius, textual content styling, and a delicate shadow. Tooltips paintings highest once they really feel light-weight and simple to learn.
Construct Examples
The Tooltip module is most dear when it reduces visual muddle whilst nonetheless holding useful data just about the component that wishes it.
Pricing Desk Characteristic Clarifiers
Pricing tables regularly want brief explanations with out turning each and every row right into a paragraph. Upload a small information icon subsequent to a characteristic label, or use the characteristic textual content itself because the anchor, then position a Tooltip module within it.
The tooltip can provide an explanation for what a characteristic comprises, outline a prohibit, explain billing phrases, or floor brief superb print with out making the entire desk taller.
Stay pricing tooltips concise. If the reason wishes a number of paragraphs, it most definitely belongs within the web page content material or a devoted FAQ phase as a substitute.
Icon Labels And Symbol Hotspots
The Tooltip module works smartly for icon-based interfaces and symbol callouts. Upload a Tooltip module within an icon, button, hotspot marker, or symbol component to show a brief label or clarification. Use this for:
- Characteristic diagrams
- Product main points
- Map issues
- Portfolio annotations
- Dashboard-style layouts
A cursor-following tooltip can really feel enticing for visible diagrams, whilst anchored positioning is most often higher for blank product or characteristic explanations.
Tooltips Inside of A Loop
Tooltips can be helpful within looped layouts. A loop can render posts, merchandise, crew contributors, portfolio entries, places, or different repeated content material, and each and every merchandise can come with its personal Tooltip module.
A weblog card, as an example, can display the featured symbol, name, creator, and date, whilst the tooltip unearths tags, classes, studying time, or a brief excerpt. A product card can use a tooltip for specifications, availability, transport notes, or fast main points.
The ease is that you just design the tooltip as soon as throughout the loop merchandise, then let dynamic content material populate the repeated cases.
Absolute best Practices For Tooltip Design
Tooltips are helpful as a result of they keep out of the best way till wanted. That still method they must be selective, transparent, and simple to cause.
- Use hover for brief hints: Hover works smartly for easy desktop-only explanations.
- Use click on for interactive content material: If the tooltip accommodates a hyperlink, button, or nested module, click on is most often a greater cause.
- Stay content material concise: Tooltips must provide an explanation for or explain, now not change primary web page content material.
- Use a visual cue: Icons, underlined phrases, badges, or hotspots lend a hand guests know a tooltip exists.
- Don’t conceal very important data: Important disclaimers, navigation, pricing prerequisites, or directions must now not are living solely within a tooltip.
- Test cellular conduct: Hover does now not translate cleanly to the touch gadgets, so check pill and contact perspectives.
- Preview whilst designing: Activate Power Visual within the Meta choice crew so you’ll be able to genre the tooltip at the canvas.
- Fit the arrow and background: A colour-matched arrow most often makes the tooltip really feel extra polished.
- Stay spacing beneficiant: Sufficient padding and line top make small tooltip panels more straightforward to learn.
Accessibility And search engine optimization Notes
Tooltip content material is most often hidden till caused. That makes it a deficient position for the rest the customer should perceive ahead of taking motion.
Use tooltips as innovative enhancement. The web page must nonetheless make sense when each and every tooltip is closed. A tooltip can upload useful context, however the principle content material, navigation, pricing, and required directions must stay visual or out there thru a extra dependable development.
For accessibility, keep away from depending on hover on my own for necessary data. Be sure that the cause is obvious, check keyboard and contact conduct, and use click on triggers when the tooltip comprises interactive content material.
For search engine optimization, don’t position content material you want listed solely within a tooltip. If a paragraph issues for seek, web page construction, or consumer figuring out, stay it within the visual web page content material.
Check out The New Divi 5 Tooltip Module Lately!
The Tooltip module in Divi 5 gets rid of a commonplace want for tradition tooltip libraries, snippets, or additional plugins. It will provide you with a local means so as to add contextual floating content material with visible controls for triggers, placement, motion, lengthen, arrows, content material, and styling.
Use it for brief hints, pricing clarifiers, shape notes, symbol hotspots, looped playing cards, and compact promo panels. Stay the content material selective, make a choice the correct cause, and check the enjoy throughout gadgets.
Completed smartly, tooltips make a format really feel cleaner with out making necessary data tougher to seek out.
The submit Exploring Divi 5’s New Tooltip Module seemed first on Chic Topics Weblog.
WordPress Web Design