Tooltips

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

Probably the simplest way is to add text to the "Hover" state of an object. When the mouse is over the object, the text will show.  See this from the User Guide: https://community.articulate.com/series/articulate-storyline-360/articles/articulate-storyline-360-user-guide-how-to-add-and-edit-states

Look at this hope it will help you.

https://www.swiftelearningservices.com/e-learning-example-using-tooltips-as-microinteractions/

Thanks, Mark, for your brilliant explanation.

Mark, great explanation of tooltips.  The hover method or mouseover methods work well in Storyline 3 and are fairly easy to use to create a tooltip.

It is much simpler to add the tool tip inside of the hover state and add a short fading/out

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

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 as always is a lot more conscientious than me. I often choose the simple/stupid option. The other thing to be aware is that a tooltip inside a state is visible to accessibility tools but you have no control over it in the focus order.

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.