Introduction to Breakdance Tooltip Element
This tutorial, learn how to use the built-in tooltip element in Breakdance, eliminating the need for dedicated plugins or third-party JavaScript libraries.
Adding a Tooltip to an Element
- Click ‘Add’ at the top left corner of the Breakdance interface.
- Search for the ‘Tooltip’ element and select it.
- Drag and drop any element into the tooltip element.
- Select the tooltip element and define the tooltip text and other settings.
Tooltip Behavior and Styling
Once the tooltip is added, it will display when hovering over the contained item(s). There’s also an option to keep the tooltip visible at all times during design adjustments in the Builder.
Content Controls
Tooltip
In this section, you can define the content and preview settings of your tooltip. Adjust the text in the tooltip and toggle the in-builder preview to suit your design needs.
- Text – Define the rich text content that will appear inside the tooltip. Customize it to provide helpful information to your site visitors.
- In-Builder Preview – Toggle this setting to view the tooltip directly within the website builder, helping you design in context.
Design Controls
Tooltip
Customize the design and positioning of your tooltip in this section. From background colors and text styles to padding and arrow adjustments, tailor the tooltip’s appearance to seamlessly integrate with your site’s design.
- Placement – Decide where the tooltip should appear relative to the target element by selecting an option from the dropdown menu.
- Offset – Adjust the spacing between the tooltip and the target element.
- Background – Choose a color for the tooltip’s background to make it stand out or blend in with your site’s design.
- Typography – Dive into typography settings, refining the text appearance inside your tooltip.
- Default – Adjust the default text styling for your tooltip content.
- Headings – Customize the appearance of headings within the tooltip.
- Paragraphs – Fine-tune the styling of paragraph text inside the tooltip.
- Links – Style any links that you might have in your tooltip’s content.
- Space After – Manage the space after your text elements, ensuring a balanced look.
- Padding – Define the internal spacing of the tooltip, creating room between the text and the tooltip’s border.
- Padding – Adjust the padding on all sides of the tooltip content.
- Radius – Soften or sharpen the corners of your tooltip by adjusting the border-radius.
- Arrow – Configure the arrow that points from the tooltip to the target element.
- Disable – Choose whether to show or hide the tooltip’s arrow.
- Size – Adjust the size of the arrow for a balanced design.
- Offset X – Shift the arrow horizontally to get the positioning just right.
- Offset Y – Shift the arrow vertically to align it perfectly.
Spacing
Ensure that your tooltip has the right amount of breathing space by adjusting the margins. Perfect the placement and ensure a harmonious look on your site.
- Margin Top – Add space above the tooltip to avoid any visual clutter.
- Margin Bottom – Add space below the tooltip to ensure it doesn’t overlap with other elements.
