13 Replies
Mark Shepherd

Hi Victor:

I disagree (slightly) with your assertion that Khaja's example doesn't have tooltips.

In the strictest sense of the word, your statement is true.  However, the basic truth is ToolTips are an example of a Microsoft Windows Control, and are not likely available for easy Insertion into Storyline projects as a result of a number of different reasons.

That said, it is not hard to create a ToolTip manually.

Echoing what Walt said earlier:

1. Add a Shape (Object) to a Slide, you wish the user to interact with. 

This doesn't have to be a Shape per se.  For example, it could also be a Text Box.

2. Create another separate Shape to act as the displayed ToolTip that results when you mouse over the Object created in Step 1. 

Typically this is a Rectangle, that could be changed to look more like a (perfect, if you create and hold the SHIFT button on the keyboard down while sizing) Square.

2a. Change the formatting and characteristics of the ToolTip, to make it look like a ToolTip.  

Microsoft, for example, has plenty of ToolTip resources on docs.microsoft.com that discuss these aspects in detail.  Primarily, I would suggest looking at the colors and formatting, to ensure your shape looks as much like a Windows-style ToolTip as much as possible.

3. Change the default characteristics of the ToolTip Shape from Normal to Hidden.

You do not want the ToolTip Shape to always display while your project is running.  To ensure this, change its initial default state to Hidden.  Repeat this for all ToolTip Shapes you need to create in your Slide(s).

4. Add a trigger to the Interactive Object created in Step 1 to enable MouseOver functionality that changes the state of the ToolTip Shape to Normal, and ensure that it changes back when you MouseOut.

Hope this helps!

-Mark

Victor Madison

Phil, I have used the hover state to a "shape" added as a tooltip with a short fade out with success.  It is a simple method to add an effective tooltip. 

I have also used the hover state to trigger a link to a layer containing the tooltip "shape".  This takes a few more steps but is not a complex process.

For me, either method results in a functional tooltip.

-Vic

Mark Shepherd

Hi all:

Phil is right, it is much easier to add ToolTip shapes to a Hover State of the object you wish to add this interaction to.

That said, I do tend to lean slightly towards taking the extra time to building a ToolTip-specific shape and controlling its operation via triggers, as they are not "hidden" within these shapes when and if I need to come back to the affected slide(s) to review or edit their functionality.

I also rename (and reorder) the ToolTip objects to be able to more easily see where everything is located on the Timeline.  Having this at-a-glance visibility makes my life a little easier as a developer.

This is really Storyline States' only drawback - the fact that you can't easily see state details unless you have the States context bar selected in the Editing View for the slide in question.

Good discussion :)

Sincerely,

-Mark

Mark Shepherd, eLearning Developer | mshepherd@cihi.ca
Canadian Institute for Health Information (CIHI)
Education & Conferences Department
Ottawa, Canada

Mark Shepherd

Phil:

It's true, I'd forgotten that accessibility is also an important factor here.

I'd guess that having things on the timeline might make the objects somewhat more accessible via the focus order, but having them appear/reappear via triggers might also potentially compromise that (in a literal usage sense) when accessing a given page/slide.  

I'm sure a clever developer will come up with a solution for this detail, at some point ;)

Victor Madison

Here is a simple example of Tooltips created using the Hover-Layer method.  I just created a layer for each tooltip.  Then I created tooltips in storyline by adding a shape and appropriate text.  Next, I linked the menu buttons to the associated layer when the mouse hovered over the menu button.

Victor Madison

Here is the same example of Tooltips but I used the Hover-State method.  I created the tooltips graphics by creating a shape and appropriate text. Next, I selected the state for each button and pasted the appropriate tooltip graphic to the hover state.  Looks and works the same as the Hover-Layer method.