I disagree (slightly) with your assertion that Khaja'sexample 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 interactwith.
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 SHIFTbutton 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 MouseOverfunctionality that changes the state of the ToolTip Shape to Normal, and ensure that it changes back when you MouseOut.
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.
Phil is right, it is much easier to add ToolTip shapes to a Hover State of the objectyou wish to add this interaction to.
That said, I do tend to lean slightly towards taking the extra time to building a ToolTip-specificshape 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 ToolTipobjects 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 Statescontext barselected 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.
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 ;)
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.
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.
Michael is correct! If you post your questions here, I'll be happy to assist you along with other members of the E-Learning Heroes community. If you prefer to share your questions privately, you can do so in a support case, where you'll usually hear from us within one business day.
Mark, that was a very clear and helpful explanation of tooltips. When it comes to creating a tooltip in Storyline 3, the hover approach and the mouseover method are both effective options that are not too difficult to implement.
In Articulate Storyline 3, you can create a tooltip by adding a layer to your slide and then using triggers to show and hide that layer when the user interacts with the tooltip icon or object.
Creating tooltips in Storyline 3 involves adding a layer to your slide, then using triggers to display or hide that layer when users interact with a tooltip icon or object for enhanced guidance.
29 Replies
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/
The example that you referred to has NO tooltips. Best Regards,
Victor E. Madison SR
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
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.
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 ;)
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.
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.
I was looking for such complete explanation, thanks I found from here.
Hi Allene,
I'm glad you found a solution in the E-Learning Heroes community. If you run into any trouble and need assistance, just let us know!
Is there any other method, for creating a quick tool tip in articulate storyline 360?
I've a few questions, how do I get in touch with you for fast replies?
Posting your questions here in the community will get you speedy replies.
Hi MyDF Account,
Michael is correct! If you post your questions here, I'll be happy to assist you along with other members of the E-Learning Heroes community. If you prefer to share your questions privately, you can do so in a support case, where you'll usually hear from us within one business day.
Thanks for sharing this link, it is certainly helpful for me.
I think it is the best explanation for this particular case. thanks for it.
In light of everything that has transpired, I believe it to be the most plausible explanation. I truly appreciate it.
Mark, that was a very clear and helpful explanation of tooltips. When it comes to creating a tooltip in Storyline 3, the hover approach and the mouseover method are both effective options that are not too difficult to implement.
In Articulate Storyline 3, you can create a tooltip by adding a layer to your slide and then using triggers to show and hide that layer when the user interacts with the tooltip icon or object.
Creating tooltips in Storyline 3 involves adding a layer to your slide, then using triggers to display or hide that layer when users interact with a tooltip icon or object for enhanced guidance.