Help Center

When creating a smart tip Usetiful offers the option to enable the hotspot beacon - a blue pulsating dot that invites your users' attention to discover more information about an element on the page - with the help of the smart tip. 

The smart tip hotspot beacon now features three different views

- Pulsating dot

- Question mark

- Info icon

To select the smart tip hotspot beacon view, we have added an option in every smart tip settings called "Icon" - it will only be available when the beacon is enabled on the smart tip. 

Once the beacon is enabled, in the Trigger section you have the option to target the smart tips based on the beacon, element, or combination of both.

• When targeting the element, you will see the smart tips bubble upon clicking or hovering over the element.
• When targeting the beacon, you will see the smart tips bubble upon clicking or hovering over the beacon.
  
  

The other possibility is aligning tooltip to the element or the beacon. 

When you choose aligning to the beacon, then your smart tip will be next to this hotspot beacon (dot, question mark or info icon - in the picture below is visible next to info icon).

To customize the appearance of the pulsating point, you can follow these steps:

- Create a theme in the Themes section of your account

- Scroll down the left-side menu in the theme editor and open the Custom CSS section

- To change the color of the pulsating point, in the Custom CSS window paste the following code, replace the color code with the desired one, and save the theme

.#{$classNamePrefix}-beacon {
background-color: #888888;
}

- To change the size of the pulsating point, in the Custom CSS window paste the following code, replace the value with the desired size, and save the theme 

.#{$classNamePrefix}-beacon {
width: 15px !important;
height: 15px !important;
}