Resources

Hotspot tutorial

Hotspot tutorial

Instructions

Watch the video tutorial and follow all the steps. Check out my example version for a blur background on a tooltip.

The custom css code

Custom css for the blur background

<style>
.e-hotspot__tooltip {
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
}
</style>

Example HTML for a button (paste this on the Elementor editor)

<button class="button1">Buy now</button>

Example CSS for a button with hover effect (paste this before the </style>)

.button1{
background-color: #fff;
color: #C25BAB;
border: none;
border-radius: 99px;
padding: 12px 30px 12px 30px;
font-size: 15px;
}
.button1:hover{
background-color: #C25BAB;
color: #fff;
border: none;
}

Don’t just copy and paste the code on your website. It only works if you follow the steps in the tutorial.