Skip to main content
N
nikolausm82011740
Inspiring
April 21, 2021
Answered

Tool tip in CP 2019 HTML 5

  • April 21, 2021
  • 1 reply
  • 1207 views

Hi all,

I am trying to create tool tips for a custom navigation bar.
(hover cursor over icon for 3 sec,, explanation appears in window above the key for as long as cursor is there or for about 4 seconds).

Of course, the function/states of the button can not impacted by that.
E.g. clickbox over the button etc. won´t work.

Using the rollover state of the icon is not good as it there is no delay and learners will know what the icon means after a while and get annoyed by redundant tool tips.


Thanks for any advice!

    This topic has been closed for replies.
    Correct answer RodWard

    Captivate does not by default offer a trigger event you can use to execute an Advanced Action on mouseover of an object. This has been a major flaw in the app since its inception.

     

    The usual way that developers would create an interaction like the one you describe is to use JavaScript and set up an Event Listener to detect the mouseover event, then use that event to execute and Advanced Action which first has a Delay Next Action by of 3 seconds, followed by an Action to SHOW a hidden tooltip text object, followed by another Delay Next Action By 4 seconds, then HIDE the same tooltip object.  You may also find that you need to set this up as a Conditional Action that first checks whether or not the button object was clicked sometime before the first Delay action has ended.

     

    If you don't know JavaScript, the Event Listener you need can be set up using the CpExtra HTML5 widget:

    https://widgetking.github.io/cpextra/features/event-listeners.html

    1 reply

    RodWard
    RodWardCorrect answer
    Braniac
    April 21, 2021

    Captivate does not by default offer a trigger event you can use to execute an Advanced Action on mouseover of an object. This has been a major flaw in the app since its inception.

     

    The usual way that developers would create an interaction like the one you describe is to use JavaScript and set up an Event Listener to detect the mouseover event, then use that event to execute and Advanced Action which first has a Delay Next Action by of 3 seconds, followed by an Action to SHOW a hidden tooltip text object, followed by another Delay Next Action By 4 seconds, then HIDE the same tooltip object.  You may also find that you need to set this up as a Conditional Action that first checks whether or not the button object was clicked sometime before the first Delay action has ended.

     

    If you don't know JavaScript, the Event Listener you need can be set up using the CpExtra HTML5 widget:

    https://widgetking.github.io/cpextra/features/event-listeners.html

    N
    nikolausm82011740Author
    Inspiring
    April 21, 2021

    Hi Rod,

    long time no see/advice!

    As always very kind of you. 

    As I was afraid this is much involved than I thought...

    I might look into it at some point!

    For now I might simply add grey boxes with tool tips above all button when triggering the rollover state of the "Help" icon".

    Not what I wanted but I now know what it would take...

     

    RodWard
    RodWard
    Braniac
    April 21, 2021

    The main reason your solution needs this amount of complexity is simply because you want delays before things happen.  With Smart Shape buttons you have the Rollover State at your disposal and you can certainly use that to add another shape object to give the TipText.

    But this means the TipText will appear as soon as the Rollover state becomes invoked.  Without events to work with, there is no inbuilt way to control the visibility of this object and delay when it appears or disappears. 

     

    The only other way I can think of to achieve the delay (without using events) would be to create an Animated GIF of the tip text and add that to the Rollover State.  But that's way too much work for such a small feature.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices