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, 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.

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. 

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: */

/* tooltip style */
.tooltip .panel-default::before {
height: 13px !important;
width: 13px !important;
background-color: red !important;
border: 1px !important;
transform: rotate(45deg);
content: "";
z-index: 2;
}

/* positions and borders */
/* top */
.tooltip .content.content-top .panel::before, .tooltip .content.content-top-right .panel::before, .tooltip .content.content-top-left .panel::before {
top: calc(100% - 7.5px) !important;
border-top: 1px solid transparent !important;
border-bottom: 1px solid red !important;
border-left: 1px solid transparent !important;
border-right: 1px solid red !important;
z-index: -1;
}

/* right */
.tooltip .content.content-right .panel::before, .tooltip .content.content-right-top .panel::before, .tooltip .content.content-right-bottom .panel::before {
left: -7.5px !important;
border-top: 1px solid transparent !important;
border-bottom: 1px solid red !important;
border-left: 1px solid red !important;
border-right: 1px solid transparent !important;
z-index: -1;
}

/* bottom */
.tooltip .content.content-bottom .panel::before, .tooltip .content.content-bottom-left .panel::before, .tooltip .content.content-bottom-right .panel::before {
top: -7.5px !important;
border-top: 1px solid red !important;
border-bottom: 1px solid transparent !important;
border-left: 1px solid red !important;
border-right: 1px solid transparent !important;
z-index: -1;
}

/* left */
.tooltip .content.content-left .panel::before, .tooltip .content.content-left-top .panel::before, .tooltip .content.content-left-bottom .panel::before {
left: calc(100% - 7.5px) !important;
border-top: 1px solid red !important;
border-bottom: 1px solid transparent !important;
border-left: 1px solid transparent !important;
border-right: 1px solid red !important;
z-index: -1;
}

The above will override the tooltip arrow color styling option that is on the Styling page (since it is hard-coded). To change the arrow color,  add in the appropriate hex value where it says "background-color: #fff !important" in the above. 

Also, you may find that when the tooltip arrow is pointed downwards, the tooltip's box-shadow will overpower the tooltip arrow's grey border a little bit, so the border won't look as apparent. It's a small detail, but something to be aware of if using the 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. 

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

    

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;
}

  

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;
}

   

Customizing the hotspot beacon

While we'd love to make the hotspot beacon available as a customizable setting in the Appcues UI, its 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;
}

Still need help? Contact Us Contact Us