How to Apply a Tooltip Extra

Important! Tooltip extras are currently only supported on HTML5 Players.

To apply a Tooltip Extra to your player, perform the following steps:

  1. Access the player wizard by editing an existing player or creating a new one.

    Tooltip_001.jpeg

  2. Go to the 'EXTRA FEATURES' area and click on 'ADD NEW'. The add extra feature tab is displayed.

    Tooltip_002.jpeg

  3. Search for 'Tooltip' in the search field. Relevant search results are displayed.

  4. Hover over the 'Annotation (Tooltip)' extra, and click on 'Add+'. The selected Extra configuration tab is displayed.
    ing the Tooltip extra, an additional configuration section will be displayed with the title CONFIG.

    Tooltip_003.jpeg

  5. Go to the 'PROPERTIES' area and apply the required fields according to the following table:


    Field Name Description
    Location X

    (For 360 videos only):  Enter a number (pixels), to define the location of the tooltip in relation to the player's horizontal axis.

    Note: VOD video x and y locations are defined in the 'LOCATION' area above. 

    Location Y

    (For 360 videos only): Enter a number (pixels), to define the location of the tooltip in relation to the player's vertical axis.

    Note: VOD video x and y locations are defined in the 'LOCATION' area above. 

    Title Enter a title that will be displayed at the top of the tooltip.
    Text Enter a text message that will be displayed in the tooltip.
    Image Url

    Enter a URL address to an image that will be displayed in the tooltip.

    Note: The URL must include an http:// or https:// prefix.

    Note: The image will be docked to the top left boarders of the Tooltip between the title and the text.

    Image width

    Enter a numeric value in pixels to define the image's width. 

    Note: This value must include a 'px' suffix, for example: 200px.

    Note: If the width of the image is larger than the tooltip width, any pixel exceeding the Tooltip width on the right will be hidden from view.

    Image height Enter a numeric value in pixels to define the image's height. 

    Note: This value must include a 'px' suffix, for example: 200px.

    Note: The tooltip total height will increase according to the image height.

    Start time

    Enter a numeric value in seconds to define the playback marker from which the tooltip will begin to display.

    Note: Setting this field to zero (0), will cause the tooltip to display always.

    Duration

    Enter a numeric value in seconds to define the playback marker after which the tooltip will no longer be displayed.

    Note: Setting this field to zero (0), will cause the tooltip to display always.

    Icon to open

    Optional: Click on this field to select one of the following options:

    • True - Selecting this option will display a clickable plus icon (+) instead of an open tooltip. When clicking on the icon, the tooltip will be displayed.
    • False - Selecting this option will display an open tooltip according to the set 'StartTime'.

    Pause video

    Optional: Click on this field to select if you want the player to pause the playback and focus on the open tooltip according to the following options:

    • True - When the 'StartTime' is reached, the player will pause the video and focus on the open tooltip. 
    • False - The viewer's point of view will remain the same and the playback will continue.

    Note: This option is only available when the 'IconToOpen' parameter is set to 'False'.

    Dim on pause

    Optional: Click on this field to select if the video area will be dimmed when the video pauses and focuses on the tooltip.

      • True - When the 'StartTime' is reached, the player will pause the video, focus on the open tooltip and dim the background area of the video. 
      • False - When the 'StartTime' is reached, the player will pause the video, focus on the open tooltip but keep the rest of the background unchanged. 

    Note: For this option to apply, 'IconToOpen' must be set to 'False' and 'pauseVideo' must be set to 'True'.

    Opacity Optional: Enter a numeric value from 0.0 to 1.0 to define the opacity of the background of the tooltip. 
    Video id Optional: To display this tooltip only on a specific video, enter the required videos ID in this field.
    Orientation

    Optional: When defining the 'iconToOpen' field to 'true' you can select on which side of the plus (+) icon the tooltip will be displayed according to the following options:

    • Enter 'left' - To display the tooltip to the left of the plus icon.
    • Enter 'right' - To display the tooltip to the right of the plus icon.
    Click through url

    Optional: Enter a URL address to which viewers will be redirected to when clicking on the tooltip.

    Action

    Optional: Enter a Player Action that will be triggered when the viewer clicks on the tooltip. This field accepts all Player Actions as the are listed in the following article Player Actions.

    This field accepts the following syntax: PLAYER_ACTION_NAME().
    For example: seekTo(45) - This will seek the video to the 45 second playback marker.

    Note: Do not enter the 'player.' prefix as shown in the Player Actions names but just the action itself with opening and closing brackets just as a JavaScript function call.

    You can also apply multiple player actions using semi-colon separators.
    For example: seekTo(45);play();volume(30) - This will seek the video to the 45 second playback marker, continue the video's playback and set the Players volume to 30%.

    Note: For further details, please see What are Player Actions.

  6. Click on 'SAVE'. Your tooltip extra is applied to your player.
Have more questions? Submit a request