Tooltip Element
The Tooltip Element offers you the ability to create a “tooltip” linked to specific text. The Tooltip Element is an Inline Element, which means it is only accessible through the Fusion Element Generator. See the links below for more information on those topics, and read on to find out more about this simple, yet effective element.
Hover over the words “Inline Element” in the next sentence to see an example of a Tooltip.
The Tooltip Element can only be used with text based elements, as it is a Inline Element.
How To Use The Tooltip Element
Note. As stated above, the Tooltip Element is an Inline Element, which means that you can access it through the Fusion Builder Element Generator. This Element can be used in all Elements that allow text editing in the Visual Editor and that therefore have access to the Fusion Builder Element Generator.
Step 1. Add a text based element via the Fusion Builder, for example, the Text Block Element.
Step 2. Add your content as normal, up to the point where you want the Tooltip to appear.
Step 3. Place your cursor at the end of your content and select the Fusion Builder Element Generator icon on the Visual Editor toolbar.
Step 4. Select the Tooltip Element.
Step 5. Add the Title, which is the text that displays in the Tooltip.
Step 6. Add the Content you want to trigger the Tooltip.
Step 7. Optionally, you can go to the Design tab and change the location and trigger for the Tooltip. When you are finished, click Insert.
Step 7. You are now back in the Text Block Element. You can add more normal text content if you wish. When you are finished click Save, and you are returned to your page. Preview to see your Tooltip in action.
NB. The Tooltip Content will always display in the main site color.
What’s the difference between a tooltip and a popover? These two elements are very similar in many ways, but their intended usage is quite different. If you want to give a small few word hint on how or what an element on the page does, use a tooltip. If you want to add any additional content, interactions, or content more than about a line; or if you need the content to remain open without the target being moused over, use a popover.
How To Use The Tooltip Element In Fusion Builder Live
Please see the Inline Elements document for more details on how Inline Elements work in Fusion Builder Live.
Element Options
Location: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
General Tab
Title – Insert the text that displays in the tooltip.
Content – Insert the text that will activate the tooltip hover.
CSS Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.
CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
Global Options
There are no Global Options for the Tooltip Element.
Tooltip Element Parameters
- placement – Choose from top, left, right, or bottom. Sets the tooltip’s position.
- trigger – Choose from click, or hover. Sets the tooltip’s trigger.
custom content – Insert the Tooltip content between the
Copy to Clipboardtags.
