Tooltip Navigation
FAQ
Overview
Tooltip Panel
Tooltips
Smaller-Screen Layout
Placements / Movements
Tooltip
Step By Step
Tooltip Navigation
Tooltip Navigation
ADOBE MUSE WIDGET
OVERVIEW
The Tooltip Navigation widget provides a way for users to navigate their way through your page. It is easy to use, all you have to do is create your tooltips and anchors and the widget is ready for use. There’s no need to worry about the layout or making it responsive because the widget automatically sets it up for you.
WIDGET OPTIONS
The widget option panels consists of five main sections. Each section is to control specific functionalities. See the sections below, and click on each one to see the related documentation.
TOOLTIP PANEL
TOOLTIPS
SMALLER-SCREEN LAYOUT
PLACEMENTS / MOVEMENTS
TOOLTIP
WIDGET OPTION
TOOLTIP PANEL
Tooltip Panel Width: The width of the tooltip panel on hover.
Tooltip Panel Color: Background color of your tooltip panel.
Position: Determines where the tooltip panel will appear in the browser. There are three options: top, center, and bottom (note that tooltips appear only on the right side of the page).
WIDGET OPTION
TOOLTIPS
1. Tooltips Size & Shape
Tooltips Size - On Hover (px): You can control the pixel size of the tooltip on hover.
Tooltips Scaling multiplier (0 - 1): This controls the size of your tooltips in it’s normal state (no hover). The size is based on the Tooltips Size On Hover. So if you set the multiplier to 0.5 and your Tooltips Size On Hover is 10 px, your tooltips will be 5 px because 0.5*10px= 5px
Tooltip Shape: There are two options for shape: circle or square.
2. Tooltips Color
Tooltips (Normal State): Controls the normal state color of the tooltips.
Tooltips (Hovered/Active State): Controls the hover/active state color of the tooltips.
Text (Normal State): Controls the normal state color of the tooltips text.
Text (Hovered/Active State): Controls the hover/active state color of the tooltips text.
3. Tooltips Text Styling
You can use the Text panel to change the default font and font-size of the Tooltips.
Text Position: There are two options
- Next to the tooltips
- Beside the tooltips
Text Letter Spacing: This feature is similar to Tracking in the Text panel and allows you to adjust the space between letters.
WIDGET OPTION
SMALLER-SCREEN LAYOUT
The Tooltip Navigation widget automatically creates a simplified version of the widget that is suitable for smaller-screens (tablet and mobile). It is a hamburger menu that users can tap on to access the tooltips panel. This section allows you to style it.
If you don’t want to use the smaller-screen version, you can always set the ‘switch to smaller-screen panel…’ to ‘0’ and it will never appear.
1. Breakpoint
Switch to Smaller-Screen panel after this screen size: Choose when you want the smaller screen panel to appear by entering the screen size of your smaller-screen’s breakpoint.
2. Smaller-Screen Panel
Panel Size: Control the pixel size of your tooltip panel.
Smaller-Screen Panel Background: Choose the background color of your tooltip panel.
Close Button: Select a color for the close button of the tooltip panel.
3. Trigger
The trigger is what users can tap on to open the Tooltip Navigation panel on smaller-screens.
Trigger Position: Determines where the trigger will appear in the browser. There are two options: top or bottom.
Trigger Shape: Choose the trigger shape, square or circle.
Trigger Size: Choose your trigger size (in pixels).
Trigger Background: Select a background color for your trigger.
Trigger Tooltips: Select a color for your trigger tooltips.
WIDGET OPTION
PLACEMENTS / MOVEMENTS
1. Horizontal / Vertical Placement
Horizontal Placement: You can enter negative/positive values to customize the horizontal placement of your tooltip panel.
Vertical Placement: You can enter negative/positive values to customize the vertical placement of your tooltip panel.
2. Distance Between Tooltips
Default: Choose the distance between tooltips. Negative values will bring them closer together, positive values will push them farther apart.
On Hover: Choose the pixel distance between tooltips on hover.
WIDGET OPTION
TOOLTIP
1. Section Title
Tooltip Text: Enter custom text for each tooltip.
Icon: You can add your own custom icons as a background image to each tooltip. The size that the icons are displayed is based on the tooltips scaling multiplier. Make sure that your icons have a transparent background and are no larger than 40x40 px.
Tip: The best method to save your icons are to open them in Photoshop, File > Export > Save For Web (or cmd+shift+alt+s) and save it as a PNG-24 with a transparent background. If you created your icons in Illustrator you can do the same thing by going to File > Save For Web.
2. Sort Order
If your tooltips aren’t in order vertically, make sure you assign a different sort order value to each tooltip. Your first tooltip will have a value of 0 then 1, 2, 3…This is important to make sure your tooltips are in the order that you want them to be in.
STEP BY STEP
- Arrange all of your desired anchors on your page.
- Drag the widget onto the canvas.
- Create a tooltip for each anchor.
- Assign custom text and a unique Sort Order number to each tooltip by going to each tooltip’s widget-option panel.
- Customize the widget by opening the Main widget-option panel.
FREQUENTLY ASKED QUESTIONS
Can I use the widget to link to other pages?
No, it can only be used with anchor points on the same page as the widget.
Can I place the tooltips on the left side of my page?
No, it can only appear on the right side of the page.
Why aren't my tooltips appearing in the right order?
To have the right order for the tooltips, each tooltip needs to be assigned a unique Sort Order number. You can assign each tooltip with a Sort Order number by going to its widget-option-panel.
How can I create a new tooltip?
There are a few options for creating a new tooltip. You can copy and paste your tooltip. Or you can click and drag your tooltip while holding down the alt key to create a new tooltip.
How can I style the text of the tooltips?
There are a few options for creating a new tooltip. You can copy and paste your tooltip. Or you can click and drag your tooltip while holding down the alt key to create a new tooltip.
How can I add an icon to a tooltip?
Click on the tooltip and open it’s option panel, go to icon and select ‘Add File’. Make sure that your icons have a transparent background and are no larger than 40x40 px.
The best method to save your icons are to open them in Photoshop, File > Export > Save For Web (or cmd+shift+alt+s) and save it as a PNG-24 with a transparent background. If you created your icons in Illustrator you can do the same thing by going to File > Save For Web.
What sorts of file types can I upload as icons?
You can use a JPG, PNG, or TIFF but the recommended file format is a PNG.
Can I use a custom tooltip shape?
No, the options are circle or square.
Do I have to use the smaller-screen version of the widget?
No, you can set the widget up so it only uses the large version of the widget. You can do this by going to the Main widget-option panel, smaller-screen layout, and go to ‘Switch to Smaller-Screen panel after this screen size’ and put 0 as the value.
Can I use the smaller-screen version on all my breakpoints, even the desktop version?
Yes, you can set the widget up so it only uses the smaller-screen version of the widget. You can do this by going to the Main widget-option panel, smaller-screen layout, and go to ‘Switch to Smaller-Screen panel after this screen size’ and put 3000 as the value or the width of your largest breakpoint.
Can I have more than one copy of the widget on the page?
No, we cannot have two copies of the widget on the page. It’s okay (and expected) to have multiple copies of the tooltip part of the widget, but we cannot put more than one main part on the page.
TOOLTIP NAVIGATION
SAMPLES
Simple
Responsive
Copyright © 2016 QooQee.com | QooQee Muse Templates & Widgets.
Adobe Muse Widget by QooQee.com