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 Themes page).  

Copy, paste, and edit the snippets below to take your flows to another level, but do not use body or html tags in the HTML component while building your flows as it may cause your flow to break or not show when the flow has been pushed live.

Step Level Use?

The below snippets are formatted for use in the CSS section of the Theme that you'll be applying to your flow. However, if you'd like to use any of these snippets to style a particular step (such that other steps aren't affected), wrap any of the below snippets in a <style> tag and place in the HTML component of the step you'd like to modify. For example:

<style> /* Insert snippet below for step level use =) */  
</style>

Adding styling to a step using the HTML block:

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: #0C5DE9 !important; /* Select the color of your choice */
    padding: 10px;
}

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

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

.tooltip .content .panel:after {
    box-shadow: 0 0 0 3px #0C5DE9; /* should be same color as above */
}

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. 

 .tooltip .panel .appcues-skip {
    color: green;
}

Changing the language of "Hide these tips" at the theme level

You can modify the text of 'Hide these tips' within each tooltip/hotspot simply by clicking on the text and editing. However, if you'd like to change this on the theme level so it applies to all of your tooltips, perhaps to change the language, use the following CSS. Place the text you'd like to see in the hide tips section next to 'content'

.panel .panel-content-actions .appcues-skip {
    font-size: 0;
}
.panel .panel-content-actions .appcues-skip:before {
    content: "× Cacher l'aide";
    font-size: 11px;
}

ProTip: you will want to make sure you name the theme accordingly. For instance: 'Appcues Onboarding Theme: Spanish'`

Modify the Close 'x'  

You can modify the color of the Close 'x' to better contrast with your application. Feel free to modify the color below, hex codes will work well too!

.panel .panel-content .exit-tooltip{
    color: orange;
}

Accessibility Tip: You can check the contrast ratio of your button using the Chrome DevTools. To do this, open your flow in the Appcues Builder, open the Chrome DevTools (Menu → More Tools → Developer Tools), Click the Inspect icon in the top-left corner of DevTools, and move your mouse pointer over the Close 'x'. Accessibility requirements suggest a contrast of at least 4.5.

Adjusting opacity

If you'd like to make your Tooltips and Hotspots transparent, you can adjust the opacity value (on a scale of 0 - 1 in increments of .1).

/* Change the opacity of the rectangular part of Tooltips/Hotspots */
.tooltip .content .panel {
  opacity: .8;
}

/* Change the opacity of the Tooltip/Hotspot pointer */
.tooltip .content.content-bottom .panel:before, .tooltip .content.content-bottom .panel:after {
  opacity: .9;
  box-shadow: none;
}

Styling the pointer

/* Change the color of the pointer */
.tooltip .content .panel:before, .tooltip .content .panel:after {
 z-index: -5;
background-color: #FC8C036;
}

/* Adjust size and position of the pointer */
.tooltip .content .panel:before, .tooltip .content .panel:after {
 z-index: -5;
width: 22px;
height: 22px;
margin-top: -10px !important;
left: 32px !important;
}

Adjusting Default Width

You can adjust the default width of hotspots and tooltips to make them larger or smaller using the following code. 

.tooltip, .tooltip .panel {
    width:  400px;
    min-width: 400px;
    max-width: 400px;
}

Client-Side Custom CSS  

Customizing the Hotspot beacon

While we'd love to make the Hotspot beacon available as a customizable setting in the Appcues UI, it's not currently available. However, if you're committed, you can modify the hotspot beacon style, using CSS in your application's code. 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;
}

Note: If you need some quick icons try using Font Awesome, Material Icons, or Linearicons.