How to add a hover event not hover tool to a Figure?

Hi there,

I want to add a hover event to a figure. The design is when a user hovers(not clicks) his mouse at a button, a text message will show up. Can you give me a hint about which function should I use? I have read the API but didn’t find the supporting one.

Thank you.
Dylan

There is no API except to add a HoverTool to a plot. It’s probably possible to directly manipulate the DOM to add a hover tooltip to a button, but I can’t do any more that suggest the possibility.

Also please note that the HTML standard document itself discourages tooltips on buttons on accessibility grounds:

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g., requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

Thank you. Another question is, can we put the button into the plot? For example here, I’d like to move the button next to the label. Is it possible?

@dylanzxc

It is possible. You will need to think of things in terms of the grid layout concepts.

In this case, I think you wll want to not use the title of the figure but rather add a separate Div that has the title information "Sib Sp" in the example shown.

From there, you have several options to arrange things using rows, columns, or grids. See also the Spacer model depending on how you choose to arrange / group things.

Thank you, I have moved the button aline with a title using the method you suggested.

But a problem happened is, I can feel the noticeable delay when I click the button, compared with putting the button on the top. Is this optimizable.

You can see the 1-2s delay from the following GIF.

example41906×899 920 KB