> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.personizely.net/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.

1. First, find the element you need to target. As an example, I'll use our [website page](https://www.personizely.net/product/website-widgets/) and target the "Watch video" element:

![Here the trigger element is id “videoDemo”](https://storage.crisp.chat/users/helpdesk/website/30a06a2316be0a00/widgets_dyjf1x.png)

2. 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/screenshot-at-feb-03-14-50-52_1w5rmhe.png)

3. In the “Triggers” 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-at-feb-03-14-51-56_kislbl.png)

4. Introduce the CSS Selectors, for an element with id videoDemo, the selector would be **#videoDemo**:

![Selectors](https://storage.crisp.chat/users/helpdesk/website/30a06a2316be0a00/screenshot-at-feb-03-14-57-43_sxdjhj.png)

5. 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/screenshot-at-feb-03-14-58-37_1ui7em6.png)

Now, if you hover on the button with **id=videoDemo**, the popup will display.