Customizing Hotspots & Tooltips (CSS)

With a little extra CSS, you can enhance your tooltips and hotspots on top of the customization in our basic style editor (located on your Theme page). 
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 the below snippet (making sure to change the color to match your theme). You will see the place to add this HTML when inside of the editor, when editing your flow*: 

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

*For now, you'll need to add the above snippet to the HTML in each step of your flow where you'd like to format the X icon.

Changing the color of "Hide these tips"

You can modify the color of the font that allows users to dismiss a tooltip by adding the below snippet to the themes section in your dashboard. 

.panel .panel-content-actions .appcues-skip {
    color: black}

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