Tooltip Magic : Getting Started
Tooltip Magic includes powerful features that leave other tooltip widgets in the dust
Back to Tooltip Magic Tutorials Home
What is a tooltip?
The tooltip is a common user interface element. The user hovers over an item and a tooltip appears—a small popup box with information about the item being hovered over. Modern browsers display the title attribute of an HTML element as a tooltip when a user hovers over that element. Hover over this text in a fairly modern browser and and see a default browser-generated tooltip appear. It's effective, but doesn't exactly grab one's attention. The tooltip that pops up when you hover over this text is a little more exciting—because it's a Tooltip Magic tooltip!
PVII Tooltip Magic
Includes Basic and Advanced Interfaces
Tooltip Magic automates the process of creating one or more popup tooltips on your page, using one of 2 available interfaces. You can use the Tooltip Magic Basic or Tooltip Magic Advanced methods. The Basic and Advanced methods each have a dedicated GUI inside Dreamweaver so you can define and configure your tooltips visually.
Before you begin
Download the workpage that we've prepared for the lessons.
Download the workpage folder (p7TTM-UI-workpages.zip)
Unzip the p7TTM-UI-workpages.zip archive and place its files inside a folder within your defined Dreamweaver web site.
PVII Tooltip Magic – Basic
Use the Basic interface when you want to assign a tooltip directly to a link, an image, or a chunk of text. You can enter or define the content source for your tooltip directly in the interface so the entire process is quick, easy, and visual.
Tutorial Series: Creating your first tooltips with the Basic UI
We'll actually be creating your first four tooltips using the Tooltip Magic Basic UI. The first lesson will teach you how to assign a tooltip to an existing link on your page. The second lesson will teach you how to assign a tooltip to a chunk of text. The third lesson will show you how to assign a tooltip to an image and to have the tooltip display that image's ALT text. The fourth lesson will show you how to assign a tooltip to a link and have the tooltip pull its content from an existing page element.
Basic Interface Tutorials
PVII Tooltip Magic – Advanced
Use the Advanced interface to access all of the powerful Tooltip Magic options and features. The Advanced UI permits you to assign conditional tooltip definitions that work on multiple page elements.
Tutorial Series: Creating your first tooltips with the Advanced UI
You can define a parameter so that all links on your page that already have a title attribute will spawn tooltips. Or you can define a parameter that pops up a tooltip contaiing the ALT text for any image with a REL attribute set to "tooltip". The conditions and the possibilities are virtually endless.
Advanced Interface Tutorials
PVII Tooltip Magic – Control Behavior
The Control Behavior allows you to set a link on your page that operates any existing Tooltip on the page. The Behavior can be applied to a text link, image, hot spot or any element on the page—even menu items or widget triggers.