Delay trigger hover action by scripting

Contents[Hide]

This article shows you how to set a delay on the trigger hover actions thru scripting. In order to set a delay for the hover action, we will be using JQuery to be able to set the interval of the delay in the chart or table.

1. Setting Up

For example, we have a chart that has a hover action to display a URL of Dundas BI Support immediately.

Chart with Hover Over Interaction
Chart with Hover Over Interaction

Hover Over Interaction Settings
Hover Over Interaction Settings

Our goal is we want the hover over action to be delayed by 10 seconds.

2. Adding the delay script

On the dashboard, under Properties > Main > Actions > Ready, add a script:

Ready action script
Ready action script
 

Open the script, and in the Script Editor, place the following code. Make sure that the table or chart script name is the same script name that you want to change in the dashboard.

var action = chart1.hoverActions[0];
chart1.hoverActions.length = 0;

$(chart1.container).hoverIntent(function (e) { this.hoverActions.push(action);
    this.onHover(e);
this.hoverActions.length = 0;
}.bind(chart1), null, {
    "interval": 10000
});

Script Editor with Script for Delay
Script Editor with Script for Delay

Take note that on the "interval" property, the value should be in milliseconds, not seconds.

Once the script has been built, open your Sandbox View, and hover over the series.

Initial Hover Over
Initial Hover Over

Hover Over Interaction After Ten Seconds
Hover Over Interaction After Ten Seconds

3. See also

Dundas Data Visualization, Inc.
500-250 Ferrand Drive
Toronto, ON, Canada
M3C 3G8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours: 7am-6pm, ET, Mon-Fri