PVII Tooltip Magic Help Document · PVII Tooltip Magic Tooltip Magic includes powerful features...

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

2

2 PVII Tooltip Magic

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



3



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

4


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

5


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

6


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

7

7 Installation

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.

8

8 Hands-on Tutorials

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.

9

9 Creating your first tooltips with the Basic UI

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

10


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: (your hyperlink)

11


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:

This is a hyperlink

The Tooltip system added the text you entered in the Tooltip Text box as a valid title attribute on the link.

12


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.

13



Mode is Create New Tooltip and it will Apply to Tag: (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

14


The chunk of text is now underlined. Select "This is a chunk of text" and switch to Code View:

This is a chunk of text

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.

15


Apply to Tag 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

16



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.

17


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!

18



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.

19

19 Basic UI: Interface Walk-Through

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)

20


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:

21


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.

22


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.

23


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.

24


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.

25


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

26


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.

27


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.

28

28 Creating your first tooltips with the Advanced UI

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.

29


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:

Hyperlink One

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:

Hyperlink One

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.

30


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 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).


31



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

32


There are 2 images on the workpage. Select the first one and look at your Property Inspector. The Alt box displays

.

Click inside the Alt box and replace "" 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.

33


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.

34


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

35


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:

36


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:

This is an extra paragraph on which you will assign a special CSS class so that a tooltip is launched when you hover over the paragraph.

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:

This is an extra paragraph on which you will assign a special CSS class so that a tooltip is launched when you hover over the paragraph.





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.

37


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

38



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.

39


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.

40


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:

Sales performance

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:

Sales performance

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:

financial forecast

41


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:

financial forecast





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.

42



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!

43


Now hover over the financial forecast link.

You’re done. Good job!

44

44 Advanced UI: Interface Walk-Through

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)

45


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.

46


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.

47


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".

48


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:

Hats Shoes Socks

49


And here are the content sources:

Blue hat special. This week only $5.00 off! Hit the ground running with $10 off every pair! Great for the feet, great for the pocketbook. Save 50%!

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.

50


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.

51


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.

52


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.

53


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.

54


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.

55


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.

56

56 PVII Tooltip Magic -Control Behavior

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.

57


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.

58


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.

59

59 Questions and Answers

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 , , , ,

, , .

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.

60


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:

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

61


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.

62


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

63


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.

http://www.projectseven.com/products/tools/tooltips/http://www.projectseven.com/products/tools/tooltips/tutorials/index.htm

64

64 Support and Contact info

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...

http://www.projectseven.com/support/questions.asp?http://www.projectseven.com/products/menusystems/pmm/user_guide/getting_started/before_define.htmhttp://www.pviiforums.com/

65


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.

file:///J:/PVII%202006/products/tools/tooltips/help/user-guide/winmail.htmfile:///J:/PVII%202006/products/tools/tooltips/help/user-guide/oe.htmfile:///J:/PVII%202006/products/tools/tooltips/help/user-guide/tbird.htmfile:///J:/PVII%202006/products/tools/tooltips/help/user-guide/entourage.htm

66


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:

[email protected]

Phones:

330-650-3675

336-374-4611

Phone hours are 9:00am - 5:00pm Eastern Time

PVII Tooltip Magic Help Document · PVII Tooltip Magic Tooltip Magic includes powerful features...

Documents

Transcript of PVII Tooltip Magic Help Document · PVII Tooltip Magic Tooltip Magic includes powerful features...