How to Customize Hotspots & Tooltips (CSS)

With a little extra CSS, you can enhance your tooltips and hotspots on top of the customization our basic style editor (located on  your Styles page) supports. 
Copy, paste, and edit the snippets below to take your flows to another level.

Please note that our markup is subject to change. While we test our own styling operators across browser versions, we are unable to guarantee that your custom CSS will operate as expected. 
Want extra support? 
Upgrade to our Growth plan for 1:1 design support!

Hotspot & Tooltip CSS

You can edit the content inside a hotspot or tooltip with this class:

.tooltip.panel-content

Adding Borders

.panel {
    border:3px solid;
    border-color: #0CABE8 !important; /* Select the color of your choice */
    padding: 10px;
}

.panel.panel-default {
    border-radius: 10px;
}

.panel .panel-content {
    padding: 0px;
}

.tooltip .content.content-bottom .panel:before, .tooltip .content.content-bottom-left .panel::before, .tooltip .content.content-bottom-right .panel:before {
    border-bottom: 10px solid #0CABE8; /* should be same color as above */
}


.tooltip .content.content-top .panel:before, .tooltip .content.content-top-left .panel::before, .tooltip .content.content-top-right .panel:before {
    border-top: 10px solid #0CABE8; /* should be same color as above */
}

Solid-Colored Flows

.panel .panel-content-actions .appcues-skip {
  color: rgba(255,255,255,0.5); /* this color affects the 'Hide these tips' text */
}

.panel .panel-content-actions .appcues-skip:hover {
  text-decoration: none;
  color: rgba(255,255,255,1); /* this color affects the hover over 'Hide these tips' text */
  transition: none;
}

.panel {
    border: none;
    background-color: #0CABE8 !important; /* this color affects your background */
}

.tooltip .content.content-bottom .panel:before, .tooltip .content.content-bottom-left .panel::before, .tooltip .content.content-bottom-right .panel:before {
    border-bottom: 10px solid #0CABE8; /* should be same color as above */
}

.tooltip .content.content-top .panel:before, .tooltip .content.content-top-left .panel::before, .tooltip .content.content-top-right .panel:before {
    border-top: 10px solid #0CABE8; /* should be same color as above */
}

.tooltip .panel {
   border: none;
   padding-bottom: 20px;
}

Changing the Arrow Color

/* To change the arrow color, you need to make sure to cover all arrow positions on both the top & bottom of the tooltip. To do that, use these two CSS rules: */

.content.content-bottom .panel::before,
.content.content-bottom-left .panel::before,
.content.content-bottom-right .panel::before {
    border-bottom: 10px solid #0CABE8; /* <-- Replace #0CABE8 with your desired arrow color */
}
.content.content-top .panel::before,
.content.content-top-left .panel::before,
.content.content-top-right .panel::before {
    border-top: 10px solid #0CABE8; /* <-- Replace #0CABE8 with your desired arrow color */
}

Making a simple Close button

For a single tooltip, for example to point out a small change or addition to a menu, it's often better to have just a simple close "x" button in the top right rather than the full "Hide these tips" text. Here's how:

In your theme:

/* Remove the "Next" or "Close" button */
a.appcues-button.appcues-button-success {
 display:none;
}

.panel .panel-content-actions .appcues-skip {
    color: rgba(255,255,255,0.45);
}

Then, in your flow's HTML, include:

<a style="position: absolute; top: -8px; right: -8px; text-decoration: none; color: white;" data-step="skip">✕</a>

Customizing the hotspot beacon

You can make your own hotspot beacon style, using CSS in the parent page (not in the Appcues theme). The following is an example of how you might do that.

/* Hide the original Appcues beacon */
appcues-layer svg.beacon {
  display: none;
}

/* Replace it with styles on the .beacon-container */
appcues-layer .beacon-container {
  background: orangered; /* Or your background image here, such as "url(http://yourdomain.com/path/to/your/image.png);" */
  border-radius: 24px;
  display: block;
  height: 24px;
  width: 24px;
  cursor: pointer;
}

/* Define a hover style */
.beacon-container:hover {
  background: dodgerblue;
}

Still need help? Contact Us Contact Us