PVII Tooltip Magic: Al Sparber & Gerry Jacobsen PVII

PVII Tooltip Magic
Tooltip Magic includes powerful features that leave other tooltip widgets in the dust. Use them to provide additional
information or context that pops up in an attractive box when users mouse over or click on text or images. Tooltips
can be based on an element's title attribute or it can contain any type of content you wish to display—including
paragraphs, tables, DIVs, forms, links, or images.
We hope you enjoy using this product as much as we did making it.
Al Sparber & Gerry Jacobsen PVII

PVII Tooltip Magic 2
Table of Contents
PVII Tooltip Magic ......................................................................................................................................................................... 1
Installation .................................................................................................................................................................................... 7
Before you begin... Work in a Defined Dreamweaver Web Site .................................................................................................. 7
Specify local site location ......................................................................................................................................................... 7
Site Name.............................................................................................................................................................................. 7
Local Site Folder.................................................................................................................................................................... 7
Hands-on Tutorials ....................................................................................................................................................................... 8
Before you begin ...................................................................................................................................................................... 8
What is a tooltip? ..................................................................................................................................................................... 8
PVII Tooltip Magic Includes Basic and Advanced Interfaces .................................................................................................... 8
PVII Tooltip Magic – Basic ..................................................................................................................................................... 8
PVII Tooltip Magic – Advanced ............................................................................................................................................. 9
Creating your first tooltips with the Basic UI................................................................................................................................ 9
Lesson 1: Adding a Tooltip to an existing hyperlink ................................................................................................................. 9
Launch the Basic UI.............................................................................................................................................................10
Create and configure your tooltip ......................................................................................................................................10
Tooltip Magic did its job .....................................................................................................................................................11
Preview in a browser ..........................................................................................................................................................12
Lesson 2: Adding a tooltip to a chunk of text .........................................................................................................................12
Launch the Tooltip Magic Basic UI......................................................................................................................................12
Tooltip Magic did its job .....................................................................................................................................................13
Lesson 3: Adding a tooltip to an image to display ALT text ....................................................................................................14
Lesson 4: Displaying Page Content inside a Tooltip ...............................................................................................................16
2

Basic UI: Interface Walk-Through ...............................................................................................................................................19
How to open the Basic UI .......................................................................................................................................................19
Insert Menu ........................................................................................................................................................................19
Insert Bar: Common (or PVII) Section .................................................................................................................................19
Insert Panel (Common or PVII Section) ..............................................................................................................................19
Right-Click ...........................................................................................................................................................................20
The Interface...........................................................................................................................................................................20
Tooltip Content Source .......................................................................................................................................................21
Source Element ID ..............................................................................................................................................................21
Tooltip Text .........................................................................................................................................................................21
Options ...................................................................................................................................................................................22
Tooltip Width ......................................................................................................................................................................22
Position ...............................................................................................................................................................................22
Position at Cursor ...............................................................................................................................................................22
Horizontal and Vertical Offsets...........................................................................................................................................23
Trigger Action .....................................................................................................................................................................23
Show Callout Arrow ............................................................................................................................................................24
Show Close Button..............................................................................................................................................................24
Window Edge Detection .....................................................................................................................................................24
Close on Mouse Out ...........................................................................................................................................................24
Use Trigger Delay ................................................................................................................................................................24
Animation Options..............................................................................................................................................................24
Page Load............................................................................................................................................................................25
Open Tooltip on Page Load.................................................................................................................................................25
Enable URL Opener .............................................................................................................................................................25
Style Theme ........................................................................................................................................................................26
Command Buttons ..............................................................................................................................................................27
Creating your first tooltips with the Advanced UI ......................................................................................................................28
Lesson 1: Setting Tooltips for all Links with Titles ..................................................................................................................28
Assign titles to your links ....................................................................................................................................................28
3
Adding a Title Using the Property Inspector.......................................................................................................................29

Adding a Title in Code View ................................................................................................................................................29
Assign titles to Hyperlink Two and Hyperlink Three...........................................................................................................29
Launch the Advanced UI .....................................................................................................................................................29
Configure your tooltip ........................................................................................................................................................30
In Conclusion... ...................................................................................................................................................................31
Lesson 2: Defining a tooltip to display ALT text for all images ...............................................................................................31
Assign ALT text to the 2 images on the page......................................................................................................................31
Add a New tooltip ...............................................................................................................................................................32
Configure your options .......................................................................................................................................................34
Lesson 3: Defining a tooltip to display based on a CSS Class Name .......................................................................................35
Assign a class to the "extra paragraph" near the page bottom .........................................................................................35
Add a title to the paragraph ...............................................................................................................................................36
Add a New tooltip ...............................................................................................................................................................36
Lesson 4: Displaying Page Content Inside a Tooltip ...............................................................................................................38
Assign an ID to each of the 2 data tables on your page .....................................................................................................38
Add REL Attributes to the Trigger Links ..............................................................................................................................40
Add a New tooltip ...............................................................................................................................................................41
Advanced UI: Interface Walk-Through .......................................................................................................................................44
How to open the Advanced UI ...............................................................................................................................................44
Insert Menu ........................................................................................................................................................................44
Insert Bar: Common or PVII Section ...................................................................................................................................44
4
Insert Panel (Common or PVII Section) ..............................................................................................................................44

The Interface...........................................................................................................................................................................45
Add New Tooltip .................................................................................................................................................................46
Delete Tooltip .....................................................................................................................................................................46
Trigger element(s) -Launch tooltip from elements with: ...................................................................................................46
Content Source -Tooltip populated from: ..........................................................................................................................48
Options ...................................................................................................................................................................................49
Tooltip Width ......................................................................................................................................................................49
Position ...............................................................................................................................................................................50
Position at Cursor ...............................................................................................................................................................50
Horizontal and Vertical Offsets...........................................................................................................................................50
Trigger Action .....................................................................................................................................................................51
Show Callout Arrow ............................................................................................................................................................51
Show Close Button..............................................................................................................................................................51
Window Edge Detection .....................................................................................................................................................51
Close on Mouse Out ...........................................................................................................................................................52
Use Trigger Delay ................................................................................................................................................................52
Animation Options..............................................................................................................................................................52
Page Load............................................................................................................................................................................53
Open Tooltip on Page Load.................................................................................................................................................53
Enable URL Opener .............................................................................................................................................................53
URL Parameter Method ......................................................................................................................................................53
Style Theme ........................................................................................................................................................................54
Command Buttons ..............................................................................................................................................................55
PVII Tooltip Magic -Control Behavior .........................................................................................................................................56
Overview .................................................................................................................................................................................56
Available Control Behavior Actions: ...................................................................................................................................56
Creating a new Control Actions behavior ...............................................................................................................................56
Modifying an existing Control Actions behavior ....................................................................................................................56
The Interface...........................................................................................................................................................................57
The Interface Items.................................................................................................................................................................57
5
Apply Action To:..................................................................................................................................................................57

Action ..................................................................................................................................................................................58
Command Buttons ..............................................................................................................................................................58
Questions and Answers ..............................................................................................................................................................59
Why do some Tooltip themes display rounded corners in some browsers, but not in others? ............................................59
Why is my Tooltip Position way off? ......................................................................................................................................59
How do I change the font color inside my tooltips?...............................................................................................................59
How do I use or manage Widgets in different folders?..........................................................................................................60
Can I Revert back to a default Style Theme CSS file? .............................................................................................................60
Can I edit the callout arrows or box background images? .....................................................................................................61
Exporting Images ................................................................................................................................................................63
Is there a place on the PVII site where I can find more examples, tutorials, or tweaks? ......................................................63
Support and Contact info ...........................................................................................................................................................64
PVII Knowledge Base ..............................................................................................................................................................64
PVII Communities ...............................................................................................................................................................64
RSS News Feeds ..................................................................................................................................................................66
Before you Contact us ........................................................................................................................................................66
Snail mail.............................................................................................................................................................................66
6
Installation 7
Installation
Look for the extension installer file p7_TTM_133.mxp (or higher) in the root of the zip archive you downloaded.
Double-click the file to install the extension. Dreamweaver's Extension Manager will open and you will be prompted
to complete the installation. Once your installation has completed, restart Dreamweaver.
OS X users: If, upon double-clicking the installer, Extension Manager does not properly launch, you have a file association
issue. To remedy the problem locate the installer file from inside a Finder window and double-click it.
Before you begin...

Work in a Defined Dreamweaver Web Site
Before you begin, make sure you are working inside a defined Dreamweaver web site. This is necessary so that
Dreamweaver knows how to link required assets. If you are new to Dreamweaver or need to learn how to define a
web site, follow these simple steps:
Choose Site > New Site
Specify local site location

The Site category of the Site Setup dialog box is the only one you need to fill out to begin working on your
Dreamweaver site. This category lets you specify the local folder where you’ll store all of your site files. When you’re
ready, you can fill out the other categories in the Site Setup dialog box, including the Servers category, where you
can specify a remote folder on your remote server.
Site Name
The Site Name is the name that appears in the Files panel and in the Manage Sites dialog box; it does not appear in
the browser.
Local Site Folder
The Local Site Folder is the name of the folder on your local disk where you store site files, templates, and library
items. Create a folder on your hard disk or click the folder icon to browse to the folder. When Dreamweaver resolves
site root-relative links, it does so relative to this folder.
7
Hands-on Tutorials 8
Hands-on Tutorials
In all likelihood, it will take considerably more time to read this page than it will to create a PVII tooltip. But if you
don't read this page first, your clock could tick a bit slower.
Before you begin

Locate the tooltip-tutorials folder that came with your download and move it into a defined Dreamweaver site. The
folder contains the following folders and files:
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. It's effective, but doesn't exactly grab one's attention.
That's why we made Tooltip Magic!
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.
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.
8
Creating your first tooltips with the Basic UI 9
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. For instance, 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 containing the ALT text for any image with a REL attribute set to "tooltip".
The conditions and the possibilities are virtually endless.
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.
Lesson 1: Adding a Tooltip to an existing hyperlink

The Tooltip Magic Basic UI is a master of speed and efficiency. Let's put it to work. Open workpage-basic.htm
9
Launch the Basic UI
Place your cursor inside the hyperlinked text "This is a hyperlink" near the top of the page and then right-click on it.
Choose PVII Tooltip Magic > Tooltip Magic by PVII - Basic
The Basic Interface will open.
Create and configure your tooltip
Note the Mode is Create New Tooltip and it will Apply to Tag: <a> (your hyperlink)
10
 Leave Tooltip Content Source set to Title Attribute. Replace the placeholder text in the Tooltip Text box
with: "Tooltip Magic Plus includes powerful features that leave other tooltip widgets in the dust".
 Set Width: 220
 Set Vertical Offset: 10 (to allow some buffer space for the callout arrow)
 Enable Show Callout Arrow (check the box)
Click OK (Leaving all other options set to their default values)
Tooltip Magic did its job
Dreamweaver Design View looks the same—but select the "This is a hyperlink" text and switch to Code View:
<a href="#" title="Tooltip Magic Plus includes powerful features that leave
other tooltip widgets in the dust." class="p7TTM_trg" id="p7Tooltip_1">This is
a hyperlink</a>
The Tooltip system added the text you entered in the Tooltip Text box as a valid title attribute on the link.
11
Switch back to Design View.
Preview in a browser
Open the page in a browser and hover over the link.
You have a working tooltip. Good job!
Note: The curved box is achieved using CSS3 and is supported by modern browsers like IE9, Firefox 3, Opera 10, Safari, and Chrome. Older
browsers render the same box, minus the rounded corners. If you would like to have a curved box that works in older browsers, simply use Style
Themes 6-11.
Lesson 2: Adding a tooltip to a chunk of text

What's a chunk of text without a tooltip? Not much. Let's add a tooltip. Open workpage-basic.htm if it's not
already open.
Launch the Tooltip Magic Basic UI
Select the text "This is a chunk of text" near top of the page and right-click on it.
The chunk of text will appear to deselect and the Basic Interface will open.
12
Mode is Create New Tooltip and it will Apply to Tag: <span> (which the system will place around your chunk of
text)
Leave Tooltip Content Source set to Title Attribute and then replace the placeholder text in the Tooltip Text
box with:
"This Tooltip is triggered by a chunk of text".
In the Options section, set:
 Position: 1 - Above Right

 Horizontal Offset: -10
 Vertical Offset: -10
 Show Callout Arrow (check the box)
 Style Theme: 09-Powder Blue
Tooltip Magic did its job
13
The chunk of text is now underlined. Select "This is a chunk of text" and switch to Code View:
<span id="p7Tooltip_2" class="p7TTM_trg" title="This Tooltip is triggered by a

chunk of text.">This is a chunk of text</span>
The Tooltip system wrapped the text inside a span tag and added the text you entered in the Tooltip Text box as a
valid title attribute on the span tag.
Switch back to Design View.
Open the page in a browser and hover over the chunk of text.
Lesson 3: Adding a tooltip to an image to display ALT text

If ever there were a natural job for Tooltip Magic, this is it. Open your workpage-basic.htm file.
In workpage.htm, Right-Click the blue image near the middle of your page.
The Basic UI will open.
14
Apply to Tag <img> means the system detected an image was selected when you launched the UI.

 Open the Tooltip Content Source list and select Alt Attribute
 Replace the placeholder text in the Tooltip Text box with: "Blue abstract painted by Rodney Dangerfield on the
set of Caddyshack."
 Set Width to: 180
 Set Position to: 8 - Right Middle
 Set Horizontal Offset to: 10
 Set Animation to: 6 - Flyout Right
 Set Duration (animation speed) to: 540
 Set Style Theme to: 09 - Style Nine
Click OK
15
Open the page in a browser. Hover over the blue image.
Now that's way cool.
Lesson 4: Displaying Page Content inside a Tooltip

Calvin Coolidge would have called this the cat's pajamas—and the stock market might never have crashed.
In workpage-basic.htm, place your cursor inside the hyperlinked text "This is another hyperlink" and right-click on
it.
The Basic UI will open
Open the Tooltip Content Source list and select Contents of Element ID.
You'll notice that the Source Element ID list becomes active. It lists all of the ID elements on your page.
16
Select the first item in the Source Element ID list "myDIV", which is the div at the bottom of your page, containing
2 paragraphs and a yellow image.
The Tooltip Text box is no longer relevant, so it is grayed out.
 Set Width to: 480

 Set Position to: 8 - Right Middle
 Set Animation to: 2 - Reveal Right
 Set Duration (animation speed) to: 500
 Set Style Theme to: 07 - Teal Bevel
Click OK
Nothing has changed in Design View, but wait until you see what happens in a browser!
17
Open the page in a browser. Notice that the div at the bottom of the page is gone. Tooltip Magic swept it off the
screen, pulled out its content, and has it staged to appear in a tooltip once you hover over the text "This is another
hyperlink", which is exactly what you should now do:
Oh my, that really is the cat's pajamas.
18
Basic UI: Interface Walk-Through 19
Basic UI: Interface Walk-Through

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.
How to open the Basic UI

There are 4 ways to open the Basic UI: through the Insert Menu, via an icon on the Insert Bar, an icon on the Insert
Panel, or by right-click.
Insert Menu
Insert Bar: Common (or PVII) Section
Insert Panel (Common or PVII Section)
19
Right-Click
The Interface
The basic Interface has 2 modes: Create New and Modify. If the element selected when you launch the interface has
no tooltip assigned, the interface will open in Create New mode. The mode will be labeled at the top of the UI
screen.
In addition to listing the mode, the UI will also identify the Tag that the tooltip is being applied to. In the screen
capture below, the UI state is:
Mode: Create New Tooltip | Apply to Tag: <a>
20
The next section of the UI is where you actually set a Tooltip Definition by selecting a Tooltip Content Source.
Tooltip Content Source
The content source list contains 3 choices:
Contents of Element ID
Choose this if you want your tooltip to use content that is already on your page. The content can be anything, so long
as it has a containing element with an ID assigned. If you make this selection, the Source Element ID list will
become active and you can select any ID on your page.
Title Attribute
Select this item if you want the content source to be the title attribute text of your trigger element. Title attributes
are typically added to links, though they can be (and often are) added to any tag.
Alt Attribute
Select this item if you want the content source to be the Alt attribute text of your trigger element. Alt attributes are
typically added to images.
Source Element ID
This list becomes active if you set the Tooltip Content Source to Contents of Element ID. All IDs found on your page
will be conveniently listed to make the selection process easy.
Tooltip Text
The Tooltip Text entry area is editable only if your Tooltip Content Source is set to Title or Alt Attribute. If Contents
of element ID is selected, the Tooltip Text editing area will become grayed out. The editing area will display any
existing Alt or Title text that the system detects on your selected trigger element. If no current attribute is detected,
the box will display the placeholder text "Enter Tooltip Text Here". This allows you to add a Title or Alt attribute
where none previously existed or to edit the text of an existing attribute.
21
Options
The option choices provide a high level of control in determining how your tooltip will look and behave.
Tooltip Width
Set a width value. This is how wide your tooltip will be when it displays. The entry box accepts whole numbers only.
Unit of measure is in pixels and is supplied automatically.
Position
Choose from 12 different positions for your tooltip. The position is relative to the trigger element.
Position at Cursor
This option will align the Tooltip to the cursor location instead of aligning to the trigger. The selected Position option
will be relative to the cursor location. This is a good choice when your tooltip trigger is a block-level element, which
spans the entire width of its container, such as a paragraph. You can also use the Horizontal and Vertical Offsets to
fine tune the position.
22
Horizontal and Vertical Offsets
These options allow you to fine tune the position of your tooltips to the pixel. This is especially handy when you've
set a callout arrow to show.
Horizontal Offset
This allows you to move the tooltip left or right from its default position. A positive value moves the tooltip right and
a negative value moves it left.
Vertical Offset
This allows you to move the tooltip up or down from its default position. A positive value moves the tooltip down
and a negative value moves it up.
Trigger Action
Choose from Mouse Over and Click (the default), Mouse Over Only, or Click Only.
Mouse Over and Click
The tooltip will appear when you either hover over or click its trigger. This is the default value and the one you
should use in most situations as it ensures your tooltips will work in Apple touch devices such as iPads, iPods, and
iPhones, which have no support for hover. When using a touch device, the trigger is used to toggle the tooltip open
or closed.
Mouse Over only
The tooltip will only pop up when its trigger is hovered over.
Click Only
The tooltip will only pop up when its trigger is clicked. Clicking the trigger while the tooltip is showing will hide the
tooltip.
23
Show Callout Arrow
Enable this option if you want a callout arrow to appear on your tooltip. The callout arrow will be automatically
positioned to correspond to the Tooltip Position option you have selected.
Show Close Button
This option is disabled by default. Enabling it will place a close button at the top right edge of your tooltip. This
option will be automatically selected if you disable the Close on Mouse Out option.
Window Edge Detection
This option is enabled by default. If there is insufficient room to display your tooltip, according to the positioning
option you set, the system will automatically re-position the tooltip as best it can within the available visible window
space. If you've set a callout arrow to show and the tooltip must be dynamically re-positioned, the callout arrow will
be hidden.
Close on Mouse Out
This option is enabled (its box checked) by default. When you move the mouse completely off the tooltip and its
trigger, the tooltip will close after a brief delay. Disable (uncheck) this option if you want your tooltip to remain open.
If this option is disabled, a close button will appear in the top right corner of the tooltip.
Use Trigger Delay
Use this option if you want to have a short delay from the time you hover over a trigger until its tooltip pops open, as
well as a short delay when your tooltip is closed.
Animation Options
You can choose from 8 animation methods or animation can be turned off.
Animation List
Select from 8 methods or disable all animation by selecting 0-None.
24
Duration
Animation is duration based. The default duration is 300 milliseconds. If you increase the duration, the animation will
run for a longer time—it will be slower. A lower value will speed up the animation as it will take less time to
complete.
Animate on Close
This option is enabled by default. If your tooltips are animated, there might be times when you want them to close
without animation. If that's the case, simply turn off (uncheck) this option.
Page Load
You can choose the Tooltip startup configuration when the page first loads into the browser.
Open Tooltip on Page Load
Check this box to open the Tooltip automatically when the page first loads into the browser. This action will only
affect the Tooltip assigned in the currently open user interface.
Enable URL Opener
An opener detection system is included that allows you to set up links with special parameters that will load a page
and also open a specific Tooltip on that page. The opener can be set to open the desired tooltip number on the page,
or can be set to look for a specific tooltip ID.
There are 2 methods available:
Anchor Method
The system will look for "#ttm_" plus the number of the Tooltip you wish to open, or the ID if the Tooltip you wish to
open.
This page link will open the second Tooltip trigger on the page:
index.htm#ttm_2
This page link will open the Tooltip trigger whose ID is set to "myId":
index.htm#ttm_myId
25
URL Parameter Method
The system will look for "?ttm=" in the URL parameter and read the associated value. The value can be the number
of the Tooltip you wish to open, or it can be the ID of the Tooltip trigger you wish to open.
index.htm?ttm=2
This page link will open the Tooltip trigger whose ID is set to "myId":
index.htm?ttm=myId
Note: Use the URL Opener only to trigger a Tooltip on another page. Do not use this method to open a Tooltip on the same page, instead, use the
Tooltip Magic Control Behavior to open, close, or trigger any Tooltip on the same page.
Style Theme
Choose from 16 different CSS-based themes or skins. As you select a theme, a preview thumbnail appears to its
right.
26
Command Buttons
The following command buttons are available.
OK
When you are done setting your desired options, click the OK button to build the tooltip or execute your
modifications to an existing tooltip. The system will verify your selections and alert you to any problems that need
your attention. If there are no problems, the interface will close and a tooltip will be added to your page or
updated—depending on whether you are in Create mode or Modify mode.
Remove
Click Remove to delete your tooltip. The tooltip definition will be removed from your page and, if this was your only
tooltip, the links to the Tooltip Magic CSS and script will also be removed. Your trigger element will not be removed.
Cancel
Click the Cancel button to completely abort the current session. This will close the interface and no changes will be
made to your page.
Help
Click the Help button to open the associated Help File in your browser.
27
Creating your first tooltips with the Advanced UI 28
Creating your first tooltips with the Advanced UI

Lesson 1: Setting Tooltips for all Links with Titles

The Tooltip Magic Advanced UI is a powerful tool. We're going to define a single tooltip that will locate all links on
your page and, if those links have title attributes, Tooltip Magic will pop up the title text in a styled tooltip.
Open workpage-advanced.htm
Assign titles to your links
There are 2 ways to assign a title attribute. Dreamweaver versions CS4, CS5, and higher have a title entry box on the
Property Inspector. Earlier versions do not so the title must be entered in Code View.
28
Adding a Title Using the Property Inspector
Place your cursor inside the text Hyperlink One. You will see a Title entry box on your Property Inspector.
Enter the text Hyperlink One Title into the box.
Adding a Title in Code View
Select the text Hyperlink One and switch to Code View. The code will look like this:
<a href="#">Hyperlink One</a>
Place your cursor to the right of the first letter (a) inside the tag
Press your space bar once and type the following code title="Title for Hyperlink One"
Your tag should now look like this:
<a title="Hyperlink One Title" href="#">Hyperlink One</a>
Assign titles to Hyperlink Two and Hyperlink Three
Select the text Hyperlink Two and assign a title of Hyperlink Two Title. Then select the text Hyperlink Three and
assign a title of Hyperlink Three Title.
Launch the Advanced UI
The Advanced UI can be launched using the icon in the Insert Bar or Insert Panel or by choosing Insert > Studio
VII > Tooltip Magic by PVII > Insert Tooltip - Advanced...
The Advanced Interface will open.
29
Configure your tooltip
The Advance UI, when opened for the first time, contains a default Tooltip definition:
These values correspond to the "Trigger Element(s): -Launch tooltip from elements with" and "Content
Source: -Tooltip populated from" settings just below the Tooltips box in the interface. In plain English, it means:
Launch tooltips from all <a> tags (links) and populate the tooltip using the text from the link's title
attribute. Of course, if a link does not contain a title attribute there will be no tooltip.
Ser Vertical Offset to 10, and enable Show Callout Arrow (check its box).
30
Open the page in a browser and hover over Hyperlink One, Hyperlink Two, and Hyperlink Three.
In conclusion...
The single Tooltip Magic definition you have set can control tooltips on an unlimited number of links. If your page has
100 links, Tooltip Magic will display a styled tooltip for each of those links that has a title attribute assigned.
Save your page
Lesson 2: Defining a tooltip to display ALT text for all images

We're going to define a new Tooltip Definition so that all images with an ALT text attribute will display the ALT text in
a Tooltip. Then we'll show how you can block one or more specific images from showing the tooltip.
Assign ALT text to the 2 images on the page
31
There are 2 images on the workpage. Select the first one and look at your Property Inspector. The Alt box displays
<empty>.
Click inside the Alt box and replace "<empty>" with the text Abstract Blue: A painting by Elmer Fudd.
Now select the second image and set its Alt attribute to Abstract Yellow: A painting by Yosemite Sam.
Add a New tooltip
The Advanced UI, when opened, will contain any previous Tooltip definitions or a default Tooltip.
32
Click the Add New Tooltip button
From the Trigger Element(s) - Launch tooltip from elements with list, select Tag Name and enter IMG in the
box next to it. The tag name can be entered in upper case or lower case characters.
From the Content Source: -Tooltip populated from list, select Attribute of Trigger and enter ALT in the box
next to it.
33
Configure your options

 Set width to 200
 Position: 2- Above Middle
 Animation: 5 - Reveal Up
 Duration: 200
 Style Theme 04 - Basic Black
Open the page in a browser and hover over the images.
Save your page
34
Lesson 3: Defining a tooltip to display based on a CSS Class Name

We're going to define a new Tooltip Definition so that any element to which we assign the CSS class
"p7TTM_tooltip" will launch a tooltip based upon the title attribute assigned to the trigger element's tag.
Assign a class to the "extra paragraph" near the page bottom
Locate the paragraph that begins with the words "This is an extra paragraph". Select the entire paragraph. Use
your Property Inspector to assign it the CSS class
To make sure you've assigned the class properly, your Tag Selector bar should now show the class name:
35
Add a title to the paragraph
Titles on elements other than links must be entered in Code View. Select the paragraph and switch to Code View.
Click on the paragraph once to deselect it. The code will look like this:
<p class="p7TTM_tooltip"><strong>This is an extra paragraph</strong> on which

you will assign a special CSS class so that a tooltip is launched when you
hover over the paragraph.</p>
Place your cursor to the right of "p7TTM_tooltip" and press your space bar once. Enter the following code:
title="This is the title assigned to the extra paragraph"
Your paragraph code should now look like this:
<p class="p7TTM_tooltip" title="This is the title assigned to the extra

paragraph"><strong>This is an extra paragraph</strong> on which you will assign
a special CSS class so that a tooltip is launched when you hover over the
paragraph.</p>
Add a New tooltip
The Advanced UI, when opened, will contain any previous Tooltip definitions.
Select the last Tooltip Definition and click the Add New Tooltip button
From the Trigger Element(s) - Launch tooltip from elements with list, select Class Name and enter
p7TTM_tooltip in the box next to it.
36
From the Content Source: -Tooltip populated from list, select Attribute of Trigger and enter title in the box
next to it.
Leave all options set to default except for Style Theme.
Set Style Theme 06 - Style Six
Click OK
37
Open the page in a browser and hover over the images.
Note: Paragraphs, like DIVs, are block-level elements and by default span the entire width of their containing element. When assigning a tooltip to a
block-level element you should choose middle or left position.
Save your page
Lesson 4: Displaying Page Content Inside a Tooltip

We're going to define a new Tooltip Definition that will allow you to display page content in multiple tooltips on your
page.
Assign an ID to each of the 2 data tables on your page
Locate the 2 data tables at the bottom of your workpage.
38
Right-click inside the first table and choose Table > Select Table
With the first table selected, enter the ID data01 into the Table box on your Property Inspector.
39
Now select the second table and set its ID to data02.
Add REL Attributes to the Trigger Links
Locate the Sales performance link just above the first data table. Place your cursor inside the link text and switch to
Code View. The code looks like this:
<a href="workpage-advanced-02.htm">Sales performance</a>
Place your cursor to the right of "workpage-advanced-02.htm" and press your space bar once. Enter the
following code:
rel="data01"
Your link code should now look like this:
<a href="workpage-advanced-02.htm" rel="data01">Sales performance</a>
Now locate financial forecast link just above the second data table. Place your cursor inside the link text and
switch to Code View. The code looks like this:
<a href="workpage-advanced-03.htm">financial forecast</a>
40
Place your cursor to the right of "workpage-advanced-02.htm" and press your space bar once. Enter the
following code:
rel="data01"
Your link code should now look like this:
<a href="workpage-advanced-03.htm" rel="data02">financial forecast</a>
Add a New tooltip
The Advanced UI, when opened, will contain any previous Tooltip definitions.
Select the last Tooltip definition and click the Add New Tooltip button
Leave the Trigger Element(s) - Launch tooltip from elements with set to Tag Name A
From the Content Source: -Tooltip populated from list, select Element ID carried in Attribute and enter rel in
the box next to it.
41

 Set width to 500
 Position to 2 - Above Middle
 Vertical Offset to -12
 Set Style Theme 01 - Style One
Click OK
Open the page in a browser. Notice that the data tables are gone. Tooltip Magic kidnapped them! But if you hover
over the Sales performance link you'll see that they are not really lost!
42
Now hover over the financial forecast link.
You’re done. Good job!
43
Advanced UI: Interface Walk-Through 44
Advanced UI: Interface Walk-Through

How to open the Advanced UI

There are 3 ways to open the Basic UI: through the Insert Menu, via an icon on the Insert Bar, or an icon on the Insert
Panel.
Insert Menu
Insert Bar: Common or PVII Section
Insert Panel (Common or PVII Section)
44
The Interface
The Advanced Interface allows you to define as many tooltips as you want, each with its own specific set of options.
The first time you open the interface, it will be pre-populated with a tooltip definition that you can start with. Your
tooltip definitions are listed in the 2-column area labeled Tooltips.
45
You'll find 2 buttons above the definition area
Add New Tooltip
You can add as many tooltips as you want. When you add a new tooltip it will be added after the tooltip that is
selected. Be mindful of the selected tooltip when editing its options so that the appropriate one is currently selected.
Delete Tooltip
To remove a tooltip, select its tooltip definition in the Tooltips list and then click the Delete Tooltip button. An
alert box will pop up and ask if you really want to delete the tooltip. Click OK to complete the deletion. If the deleted
tooltip was your only tooltip, the Delete command will also remove the links to the Tooltip Magic CSS and script file.
The next section of the UI is where you actually set a Tooltip Definition by selecting a Tooltip Content Source.
Trigger element(s) -Launch tooltip from elements with:
This is where you define the tooltip trigger. The tooltip trigger is the element on your page that you hover over (or
click) to make your tooltip pop up. There are 4 options in the list to choose from:
1. Tag Name
When you select Tag Name, you must type the tag you want to use in the box just to the right of the list. For
example, for images, type img. For links, type A. The tag entry field is not case sensitive so you can enter your tag
name in upper case or lower case characters.
46
2. Element ID
When you select Element ID, you must type the ID of the trigger element you want to use in the box just to the right
of the list. For example, if your trigger is assigned an ID of my-ID, then that's what you would enter. When the page
runs, the system will look for an element on your page that has an ID value of my-ID. When you hover over it, a
tooltip will pop up. Since only one element on a page can have a specific ID, this configuration will work for a single
trigger.
3. Class Name
When you select Class Name, you must type the class name of the trigger element you want to use in the box just
to the right of the list. For example, if your trigger is assigned a class of pop-tooltip, then that's what you would
enter. Since class names can be assigned to as many elements as you want, this is a good technique to use when you
want a single tooltip definition that controls multiple tooltips.
4. Tag Attribute
When you select Tag Attribute, you must type the attribute name you wish to use on your triggers in the box just
to the right of the list. For example, if you want to use the REL attribute, then that's what you would enter. When
you use Tag Attribute, the Value box becomes active and you must enter the value you are going to be assigning to
your tag attribute. In the example below, we'll use a REL attribute of "pop-me-up".
47
Content Source -Tooltip populated from:
This is where you define the source for the content that will populate your tooltips. There are 3 options to choose
from:
1. Attribute of Trigger
When you select Attribute of Trigger, you must type the attribute you want to use in the box just to the right of the
list. If, for example, you type "title", your tooltips will pull their content from the text in the title attribute of the
trigger element.
2. Element ID
When you select Element ID, you must type the ID of the content source element you want to use in the box just to
the right of the list. In the example below, your tooltip content will be pulled from a div on the page that happens to
be assigned an ID of shoe-sizes.
3. Element ID in Attribute
This is a great technique to use! Since IDs must always be specific to a single page element, this method allows you
to set one tooltip definition that can pull content on your page into an unlimited number of tooltips from an
unlimited number of elements—each having its own unique ID, of course.
If we set the attribute that carries the ID to REL, here is how it would work. consider these 3 trigger links:
<a href="#" rel="specials-hats">Hats</a>

<a href="#" rel="specials-shoes">Shoes</a>
<a href="#" rel="specials-socks">Socks</a>
48
And here are the content sources:
<div id="specials-hats">Blue hat special. This week only $5.00 off!</div>

<div id="specials-shoes">Hit the ground running with $10 off every pair!</div>
<div id="specials-socks">Great for the feet, great for the pocketbook. Save
50%!</div>
And it's all controlled from a single Tooltip Definition!
Options
The option choices provide a high level of control in determining how your tooltip will look and behave.
Tooltip Width
Set a width value. This is how wide your tooltip will be when it displays. The entry box accepts whole numbers only.
Unit of measure is in pixels and is supplied automatically.
49
Position
Choose from 12 different positions for your tooltip. The position is relative to the trigger element.
Position at Cursor
This option will align the Tooltip to the cursor location instead of aligning to the trigger. The selected Position option
will be relative to the cursor location. You can also use the Horizontal and Vertical Offsets to fine tune the position.
Horizontal and Vertical Offsets
These options allow you to fine tune the position of your tooltips to the pixel. This is especially handy when you've
set a callout arrow to show.
Horizontal Offset
This allows you to move the tooltip left or right from its default position. A positive value moves the tooltip right and
a negative value moves it left.
Vertical Offset
This allows you to move the tooltip up or down from its default position. A positive value moves the tooltip down
and a negative value moves it up.
50
Trigger Action
Choose from Mouse Over and Click (the default), Mouse Over Only, or Click Only.
Mouse Over and Click
The tooltip will appear when you either hover over or click its trigger. This is the default value and the one you
should use in most situations as it ensures your tooltips will work in Apple touch devices such as iPads, iPods, and
iPhones, which have no support for hover. When using a touch device, the trigger is used to toggle the tooltip open
or closed.
Mouse Over only
The tooltip will only pop up when its trigger is hovered over.
Click Only
The tooltip will only pop up when its trigger is clicked. Clicking the trigger while the tooltip is showing will hide the
tooltip.
Show Callout Arrow
Enable this option if you want a callout arrow to appear on your tooltip. The callout arrow will be automatically
positioned to correspond to the Tooltip Position option you have selected.
Show Close Button
This option is disabled by default. Enabling it will place a close button at the top right edge of your tooltip. This
option will be automatically selected if you disable the Close on Mouse Out option.
Window Edge Detection
This option is enabled by default. If there is insufficient room to display your tooltip, according to the positioning
option you set, the system will automatically re-position the tooltip as best it can within the available visible window
space. If you've set a callout arrow to show and the tooltip must be dynamically re-positioned, the callout arrow will
be hidden.
51
Close on Mouse Out
This option is enabled (its box checked) by default. When you move the mouse completely off the tooltip and its
trigger, the tooltip will close after a brief delay. Disable (uncheck) this option if you want your tooltip to remain open.
If this option is disabled, a close button will appear in the top right corner of the tooltip.
Use Trigger Delay
Use this option if you want to have a short delay from the time you hover over a trigger until its tooltip pops open.
Animation Options
You can choose from 8 animation methods or animation can be turned off.
Animation List
Select from 8 methods or disable all animation by selecting 0-None.
Duration
Animation is duration based. The default duration is 300 milliseconds. If you increase the duration, the animation will
run for a longer time—it will be slower. A lower value will speed up the animation as it will take less time to
complete.
Animate on Close
This option is enabled by default. If your tooltips are animated, there might be times when you want them to close
without animation. If that's the case, simply turn off (uncheck) this option.
52
Page Load
You can choose the Tooltip startup configuration when the page first loads into the browser.
Open Tooltip on Page Load
Check this box to open the Tooltip(s) automatically when the page first loads into the browser. The Advanced
Interface allows for multiple Tooltips to be created for each Tooltip definition, all of the Tooltips created by the
currently selected definition will be opened. If you want just a single Tooltip to be opened then it is best to set the
definition for a single item only or use the Basic Interface, which creates a single Tooltip.
Enable URL Opener
An opener detection system is included that allows you to set up links with special parameters that will load a page
and also open a specific Tooltip on that page. The opener can be set to open the desired tooltip number on the page,
or can be set to look for a specific tooltip ID. There are 2 methods available:
Anchor Method:
The system will look for "#ttm_" plus the number of the Tooltip you wish to open, or the ID of the Tooltip you wish
to open.
index.htm#ttm_2
The page link will open the Tooltip trigger whose ID is set to "myId":
index.htm#ttm_myId
URL Parameter Method
The system will look for "?ttm=" in the URL parameter and read the associated value. The value can be the number
of the Tooltip you wish to open, or it can be the ID of the Tooltip trigger you wish to open.
index.htm?ttm=2
The page link will open the Tooltip trigger whose ID is set to "myId":
index.htm?ttm=myId
Note: Use the URL Opener only to trigger a Tooltip on another page. Do not use this method to open a Tooltip on the same page, instead, use the
Tooltip Magic Control Behavior to open, close, or trigger any Tooltip on the same page.
53
Style Theme
Choose from 16 different CSS-based themes or skins. As you select a theme, a preview thumbnail appears to its
right.
Custom Theme (advanced feature)
This is a powerful feature that allows you to create a unique theme for a page. It could be handy if you want to use
the same theme for 2 tooltips, but have one look just slightly different. Here is how it create a custom theme:
 Open an existing Tooltip Magic CSS file and save a copy as custom.css
 Assuming the original you used was p7TTM02.css, open custom.css and do a find and replace, replacing ".p7TTM02"
with ".custom".
 Link custom.css to your page.
 In the Tooltip interface, select Custom Theme and in its value box simply type the word custom.
54
Command Buttons
OK
When you are done setting your desired options, click the OK button to build the tooltip or execute your
modifications to an existing tooltip. The system will verify your selections and alert you to any problems that need
your attention. If there are no problems, the interface will close and a tooltip will be added to your page or
updated—depending on whether you are in Create mode or Modify mode.
Cancel
made to your page.
Help
Click the Help button to open the associated Help File in your browser.
55
PVII Tooltip Magic -Control Behavior 56
PVII Tooltip Magic -Control Behavior
Overview
The Control Behavior allows you to set a link anywhere on your page to remotely operate any existing Tooltip. The
Behavior can be applied to any text link, image, hot spot, paragraphs, list items, ... in short, any element on the
page, even menu items or widget triggers.
Available Control Behavior Actions:

 Open Tooltip
 Close Tooltip
 Trigger Tooltip (emulate a mouse click on the Tooltip trigger)
The Behavior can be set to operate onMouseOver, onMouseOut, onClick or any other available event.
Note: In some cases where you wish to apply the Behavior to an element whose events are already controlled by a widget or menu system you can
apply the Behavior to the parent element instead. Alternatively, you can use events that are not being used by the widget or menu. For example, if
the onClick event is reserved, then use the onMouseDown event. Similarly, if the onMouseOver and onMouseOut events are reserved then use
onFocus and onBlur.
Creating a new Control Actions behavior

1. Select (click) a text link, image, or other page element to act as the behavior Control.
2. Open your Dreamweaver Behaviors Panel (Shift + F4)
3. Click the plus sign (+) on the Behavior Panel.
4. Choose Studio VII > Tooltip Magic > Control Actions to open the interface.
5. Set the Apply Action To method and enter the Tooltip number or ID you wish to act on.
6. Select the Action.
7. Click OK to apply the behavior.
Modifying an existing Control Actions behavior

1. Select the element that contains an existing Tooltip Magic Control behavior.
2. Double-click the Tooltip Magic Control Actions behavior in the Behaviors Panel to open the interface.
3. Set the Apply Action To method and enter the Tooltip you wish to act on.
4. Select the Action.
5. Click OK to apply the revised behavior.
56
The Interface
The Tooltip Magic -Control Actions interface allows you to select the Tooltip to act on and choose the Action to
apply.
The Interface Items
Apply Action To:
The Behavior can act on any Tooltip on the page, you can specify the Tooltip you wish to control by clicking the Radio
button next to one of two methods:
1. Tooltip Trigger Number
When the page loads into the browser the Tooltip magic system sets up all of the Tooltips based on the Tooltip
definitions you created. The Tooltip Triggers are the trigger links that launch the Tooltips(s), and are created in
sequential order when the page first loads. You can specify which of the Tooltip Triggers to act on by entering the
Tooltip Trigger number. Entering a 1 will apply the Behavior action to the first Tooltip Trigger on the page. Entering a
2 will apply the Behavior action to the second Tooltip Trigger on the page, and so on.
2. Tooltip Trigger with ID
If the Tooltip Trigger is assigned an ID attribute, as is the case when you use the Basic Interface to create a Tooltip,
the Behavior can be set to apply the action to the Tooltip Trigger whose ID matches. The ID is case sensitive, enter
the ID exactly as it appears in the source code.
57
Action
Open Tooltip
This will open the Tooltip. The associated Tooltip Trigger will also be set to its open state. If the Tooltip is already
open then the action will be ignored.
Close Tooltip
This will close the Tooltip. The associated Tooltip Trigger will also be set to its closed state. If the Tooltip is already
closed then the action will be ignored.
Trigger Tooltip
This will emulate a click on the Tooltip Trigger. The Tooltip will close if it is already open, and will open if it is already
closed. Successive actions will toggle between the open and closed states.
Command Buttons
OK
When you have made your selections, click the OK button to apply the behavior. By default the behavior will be
applied to the onMouseOver event of the text link or image. You can change the event by selecting the desired event
in the Behaviors panel. .
Cancel
made to your page.
Help
Click the Help button to open the associated Help File in your browser. This page can remain open for easy reference
while you continue working with the Tooltip Magic interface.
58
Questions and Answers 59
Questions and Answers

The following questions and answers should prove helpful as you build and manage your widgets.
Why do some themes display rounded corners in some browsers, but not in others?
Style Themes render rounded corners using CSS3, which is supported by modern browsers like IE9, Firefox 3, Opera
10, Safari, and Chrome. Older browsers render the same box, minus the rounded corners.
Why is my Tooltip Position way off?

Chances are your tooltip trigger is a block-level element, such as a <h1>, <h2>, <h?>, <div>, <p>, <table>, <form>.
Block-level elements have an invisible box (unless you assign a background or border) that spans the entire width of
its parent container or, in the absence of a container, the entire window. If you are doing a tooltip in this type of
scenario you should use the Position at Cursor option.
How do I change the font color inside my tooltips?

If you are using Style Theme 01, open your CSS Styles panel, expand the p7TTM01.css file and locate the .p7TTM01
.p7TTMcnt rule. The number "01" at the end of the first part of the rule designates the style theme being used. If you
are using Style Theme 02, for example, the rule name would be .p7TTM02 .p7TTMcnt.
You can edit this rule to change the font-family, color, or size.
59
How do I use or manage Widgets in different folders?

When you create a widget, the system writes a folder named p7ttm in the folder that contains the page you are
working on - and uses that folder to store style sheets, images, and scripts. This allows for easy and safe prototyping.
If you create a widget on page1.htm, in a folder named tutorials, and edit the CSS for that widget, your changes are
restricted to that folder. Make another page in that folder and create a widget using the same Style Theme and it
will use the same style sheet you edited while working on page1. If you create a widget on a page in a new folder,
the system will create a new p7ttm folder inside that folder and populate it with default style sheets, scripts, and
images. This allows you to test and prototype with complete freedom - without affecting finalized pages in other
folders.
There may, however, be times when you want widgets in different folders to use the same style sheets. To do that,
create your widgets first. Then decide which p7ttm assets folder you want to use for all your pages. You'll need to set
the paths for all CSS files, and the JavaScript file, to point to the p7ttm assets folder you want to use. For a page with
a widget using Style Theme 01, the CSS and script links look like this:
<script type="text/javascript" src="p7ttm/p7TTMscripts.js"></script>

<link href="p7ttm/p7TTM01.css" rel="stylesheet" type="text/css" media="all">
You can change the path to CSS or script files visually in Dreamweaver by displaying Head Content in a toolbar at the
top of your design window. To turn this feature on, choose View > Head Content.
Click the appropriate icon and your Property Inspector will change to reflect your choice, easily enabling you to
browse to the location of the assets folder you want to use.
Can I Revert back to a default Style Theme CSS file?

Should you ever make a large error and need to revert back to a default and working CSS file, do this:
1. Delete the bad CSS file from your p7ttm folder

2. Open a page in that folder that contains a widget that uses that bad style sheet.
3. Open the Tooltip Magic interface as if you were going to add a new tooltip.
4. Make no changes in the UI - simply click the OK button
5. The system will create a new version of the appropriate CSS file
60
Can I edit the callout arrows or box background images?

When you create a tooltip, the system will create a Fireworks folder at the same level as your page and in that folder
will be Fireworks documents for each style theme. Use these documents to edit the background images for a theme.
These are the Fireworks documents:
There is one additional Fireworks file that contains black arrow sets used in the following themes:
DO NOT CHANGE THE SIZES OF ANY OF THE SLICES. RESTRICT YOUR EDITS TO COLORS ONLY.
It is highly recommended that unless you are proficient with both image editing and CSS that you limit your edits to simple
color changes.
61
Once you've edited the images inside a Fireworks document, you need to export the images back to your Web site's
p7ttm/img folder. If you are using Fireworks CS5 (or later) you'll need to address a bug in that program first. Before
you export, choose File > HTML Setup:
Make sure each of the 8 select lists under Slice file names is set to None.
Click Set Defaults then OK
62
Exporting Images
In Fireworks, use these export settings:
Note: The File name box is irrelevant since you are exporting slices.
Is there a place on the PVII site where I can find more examples, tutorials, or tweaks?
Yes. Go to the Tooltip Magic Home Page or Examples and Tutorials Page. All new content will be linked from there.
63
Support and Contact info 64
Support and Contact info

PVII quality does not end with your purchase - it continues with the best customer support in the business.
PVII Knowledge Base

The PVII Knowledge Base is an online PVII application allowing you to access dozens of Tech Notes, tips, and
techniques relating to our products, as well as to general web development issues..
Open the Knowledge Base | View the 10 Most Recent Additions
PVII Communities
PVII maintains separate and distinct Web Forum and Newsgroup communities. We do this to ensure you always have
access via your preferred medium and device.
1. The PVII Web Forums
The PVII Web Forum is a modern browser-based community, accessible to both desktop and mobile devices and
requires no additional software or plugins.
Visit The PVII Web Forum community now...
64
2. PVII Newsgroup forums
The Project VII Newsgroup is available via private and secure NNTP servers. In order to subscribe to a newsgroup you
must have a newsgroup-capable client installed such as:
1. Mozilla Thunderbird
2. Windows Live Mail
3. Windows Mail/Outlook Express
4. Opera Mail
5. Entourage
Server: forums.projectseven.com
Need help setting up a newsgroup?
Setting up a new newsgroup account in Windows Mail (Vista)
Setting up a new newsgroup account in Outlook Express
Setting up a new newsgroup account in Mozilla Thunderbird
Setting up a new newsgroup account in Entourage
If you have another newsgroup-capable program that you are using, please see its documentation to learn how to
add a new newsgroup account.
Note: PVII newsgroups are private and have nothing to do with UseNet feeds that may be provided by your ISP. That is, you will not find our
newsgroups in a list of newsgroups distributed by your internet service provider. You must set up our news server as a new account.
65
RSS News Feeds
Keep up with the latest news the minute it's released by subscribing to our RSS news feed. If you are not sure how to
subscribe, please check this page:
PVII RSS Info
Before you Contact us
Before making a support inquiry, please be certain to have read the documentation that came with your product.
Please include your Dreamweaver version, as well as your computer operating system type in all support
correspondence.
E-Mail:
support@projectseven.com
Phones:
330-650-3675
336-374-4611
Phone hours are 9:00am - 5:00pm Eastern Time U.S.
Snail mail
Project Seven Development

339 Cristi Lane
Dobson, NC 27017
66

PVII Tooltip Magic: Al Sparber & Gerry Jacobsen PVII

Uploaded by

PVII Tooltip Magic: Al Sparber & Gerry Jacobsen PVII

Uploaded by

PVII Tooltip Magic

Al Sparber & Gerry Jacobsen PVII

Preview in a browser ..........................................................................................................................................................18

Adding a Title Using the Property Inspector.......................................................................................................................29

Insert Panel (Common or PVII Section) ..............................................................................................................................44

Apply Action To:..................................................................................................................................................................57

Before you begin...

Choose Site > New Site

Specify local site location

Local Site Folder

Before you begin

PVII Tooltip Magic

PVII Tooltip Magic – Basic

PVII Tooltip Magic – Advanced

Creating your first tooltips with the Basic UI

Lesson 1: Adding a Tooltip to an existing hyperlink

Launch the Basic UI

Choose PVII Tooltip Magic > Tooltip Magic by PVII - Basic

The Basic Interface will open.

Create and configure your tooltip

Click OK (Leaving all other options set to their default values)

Tooltip Magic did its job

Switch back to Design View.

Open the page in a browser and hover over the link.

You have a working tooltip. Good job!

Lesson 2: Adding a tooltip to a chunk of text

Launch the Tooltip Magic Basic UI

Choose PVII Tooltip Magic > Tooltip Magic by PVII - Basic

Create and configure your tooltip

In the Options section, set:

 Position: 1 - Above Right

Click OK (Leaving all other options set to their default values)

Tooltip Magic did its job

<span id="p7Tooltip_2" class="p7TTM_trg" title="This Tooltip is triggered by a

Switch back to Design View.

Lesson 3: Adding a tooltip to an image to display ALT text

Launch the Tooltip Magic Basic UI

Choose PVII Tooltip Magic > Tooltip Magic by PVII - Basic

The Basic UI will open.

Create and configure your tooltip

Open the page in a browser. Hover over the blue image.

Now that's way cool.

Lesson 4: Displaying Page Content inside a Tooltip

Launch the Tooltip Magic Basic UI

Choose PVII Tooltip Magic > Tooltip Magic by PVII - Basic

The Basic UI will open

Create and configure your tooltip

The Tooltip Text box is no longer relevant, so it is grayed out.

 Set Width to: 480

Oh my, that really is the cat's pajamas.

Basic UI: Interface Walk-Through

How to open the Basic UI

Insert Bar: Common (or PVII) Section

Insert Panel (Common or PVII Section)

Mode: Create New Tooltip | Apply to Tag: <a>

Tooltip Content Source

The content source list contains 3 choices:

Horizontal and Vertical Offsets

Mouse Over and Click

Mouse Over only

Show Callout Arrow

Show Close Button

Window Edge Detection

Close on Mouse Out

Use Trigger Delay

Select from 8 methods or disable all animation by selecting 0-None.

Open Tooltip on Page Load

Enable URL Opener

There are 2 methods available:

URL Parameter Method

The following command buttons are available.

Creating your first tooltips with the Advanced UI

Lesson 1: Setting Tooltips for all Links with Titles

Assign titles to your links

Adding a Title Using the Property Inspector

Enter the text Hyperlink One Title into the box.