If enabled, Smart Tip Beacons (hotspots) are placed automatically. When the target element is a piece of text, in some cases the beacon may overlay the text. 


Here's how to fix it. 


1. Go to your account's Themes section, create a new theme

2. Scroll down in the theme editor until you see the Custom CSS button (highlighted with red below)


3. Open the Custom CSS editor, and use one of the following code chunks - paste the code chunk in the css editor, and adjust the values to your liking (depending on how the display of the beacon changes)

4. Save the theme, go to your smart tips and apply the theme in the Settings for the smart tip group. 



Note: every separate smart tip beacon has it's own dedicated id, here's how to get it


Go to the page on which the beacon is shown, right click on the beacon and select "Inspect" - you will see a highlighted piece of code in the Inspector



In the code above the line id="beacon68400" represents the id, and it must be used as #beacon68400, as shown in the further instructions



To move the smart tip upwards use the following code chunk



#beacon68400 {
  
  margin-bottom: 20px !important;
  
  }


Replace 20px with any other larger or smaller values to subtly adjust the position


To move the smart tip downwards use the following code chunk


#beacon68400 {
  
  margin-top: 20px !important;
  
  }


To move the smart tip to the left use the following code chunk


#beacon68400 {
  
  margin-right: 20px !important;
  
  }


To move the smart tip to the right use the following code chunk


#beacon68400 {
  
  margin-left: 20px !important;
  
  }