Tooltips are an essential feature on a large number of websites. These handy informational message pop-ups are now possible in your Muse site with our new Tooltips widget.
Tooltips can be applied to any Muse element, and you may use as many on a page as you like. Setup and styling are easy using the built-in themes.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
Setup
PREPARING MUSE ELEMENTS
Tooltips can be applied to any element in Muse, such as text, icons, buttons, images, etc. Select the element you wish to update with a tooltip, and apply a graphic style. The graphic style name should be simple, with no spaces or special characters, like "tip1", "tip2", etc.
We will use the graphic style names to link Muse elements to individual Tootips widgets. Each Muse element with a tooltip will require its own unique instance of a Tooltip widget.
WIDGET SETUP
Drag the widget from the library and drop into your project in Design mode. The widget is best positioned off-canvas.
If you plan to use multiple tooltips widgets on the same page, simply duplicate the widget by option/alt-dragging it, or by copy/pasting it.
Open the widget option panel.
Using the graphic style you applied to a Muse element in the previous section, enter the graphic style name into the Element Graphic Style field in the widget option panel.
Tooltip Message: This is the message that will appear in the tooltip.
+ Font Family: If you prefer to use a specific font, enter the font family name here. Be sure to use the proper CSS style name of the font, and to make sure the font is used elsewhere on the page. Note that the same font must be used for all tooltips.
Tooltip Position: This is the direction in which the tooltip will open. Options are Top, Bottom, Right and Left.
Interaction: Select the way interaction that will be required to trigger the tooltip: hover or click.
Animation Style: These preset animation styles offer multiple ways that that tooltip transitions into place.
Animation Duration: This is the amount of time it takes for the animation to complete.
Animation Delay: Use this option to set a delay before the tooltip is triggered.
Theme and Size: Color themes (dark and light) and sizing (small, regular and large) are preset to ensure that the colors and sizing are always appropriate. Without preset options here, margins and padding can become quite complicated in order to display a message of varying character length.