How to trigger a widget to show up on mouse hover
You can configure your widget to be displayed when your visitors mouse over a specific element.
Example:
![](https://storage.crisp.chat/users/helpdesk/website/30a06a2316be0a00/element-hover_1rmb23p.gif)
Follow these steps to set up a popup trigger on hover.
First, find the element you need to target. As an example, I'll use our website page and target the "Watch video" element:
![Here the trigger element is id “videoDemo”](https://storage.crisp.chat/users/helpdesk/website/30a06a2316be0a00/widgets_dyjf1x.png)
On the widgets page, find the widget you want to change and click on the pencil to edit widget:
![Edit Widget](https://storage.crisp.chat/users/helpdesk/website/30a06a2316be0a00/element-hover_1mbna3i.png)
Go to the "Display options" tab:
![Display options](https://storage.crisp.chat/users/helpdesk/website/30a06a2316be0a00/display-option_3h0gfa.png)
In the “Show on” tab, click the “Enable a trigger” button and choose “Hover” from the drop-down menu:
![Show on hover](https://storage.crisp.chat/users/helpdesk/website/30a06a2316be0a00/screenshot-apppersonizelynet-2_13xfkv4.png)
Introduce the CSS Selectors, for an element with id videoDemo, the selector would be #videoDemo:
![Selectors](https://storage.crisp.chat/users/helpdesk/website/30a06a2316be0a00/10_439bqt.png)
You can edit the list of Selectors below the drop-down menu, and you can also introduce a Condition for your trigger. Save your changes at the top-right corner of the screen and you are done:
![Conditions](https://storage.crisp.chat/users/helpdesk/website/30a06a2316be0a00/11_e56ge9.png)
Now, if you over on the button with id=videoDemo, the popup will display.
Example:
![](https://storage.crisp.chat/users/helpdesk/website/30a06a2316be0a00/element-hover_1rmb23p.gif)
Follow these steps to set up a popup trigger on hover.
First, find the element you need to target. As an example, I'll use our website page and target the "Watch video" element:
![Here the trigger element is id “videoDemo”](https://storage.crisp.chat/users/helpdesk/website/30a06a2316be0a00/widgets_dyjf1x.png)
On the widgets page, find the widget you want to change and click on the pencil to edit widget:
![Edit Widget](https://storage.crisp.chat/users/helpdesk/website/30a06a2316be0a00/element-hover_1mbna3i.png)
Go to the "Display options" tab:
![Display options](https://storage.crisp.chat/users/helpdesk/website/30a06a2316be0a00/display-option_3h0gfa.png)
In the “Show on” tab, click the “Enable a trigger” button and choose “Hover” from the drop-down menu:
![Show on hover](https://storage.crisp.chat/users/helpdesk/website/30a06a2316be0a00/screenshot-apppersonizelynet-2_13xfkv4.png)
Introduce the CSS Selectors, for an element with id videoDemo, the selector would be #videoDemo:
![Selectors](https://storage.crisp.chat/users/helpdesk/website/30a06a2316be0a00/10_439bqt.png)
You can edit the list of Selectors below the drop-down menu, and you can also introduce a Condition for your trigger. Save your changes at the top-right corner of the screen and you are done:
![Conditions](https://storage.crisp.chat/users/helpdesk/website/30a06a2316be0a00/11_e56ge9.png)
Now, if you over on the button with id=videoDemo, the popup will display.
Updated on: 23/11/2022
Thank you!