How do I style the arrow on a guide?

Styling the Guide Arrow

You can style the CSS of the arrow on a guide in three different locations:

1. Manage Guides in App > Global Settings > Global CSS

2. Manage Guides in App > Global Settings > Templates (these will override any Global CSS)

3. Manage Guides in App > Click on a specific guide in lower bar > Edit Guide > CSS (only an option if the guide is not linked to a template)

Note that the size of the arrow can only be changed by editing the TOOLTIP_ARROW_SIZE field. We recommend you do this either by adding the size value: pendo.TOOLTIP_ARROW_SIZE = ##; into your snippet or by inserting the value change into your guide center javascript. Snippet example below:

<script>
(function(apiKey){
    (function(p,e,n,d,o){var v,w,x,y,z;o=p[d]=p[d]||{};o._q=[];
      v=['initialize','identify','updateOptions','pageLoad'];for(w=0,x=v.length;w<x;++w)(function(m){
      o[m]=o[m]||function(){o._q[m===v[0]?'unshift':'push']([m].concat([].slice.call(arguments,0)));};})(v[w]);
      y=e.createElement(n);y.async=!0;y.src='https://cdn.pendo.io/agent/static/CUSTOMER_API_KEY/pendo.js';
      z=e.getElementsByTagName(n)[0];z.parentNode.insertBefore(y,z);})(window,document,'script','pendo');

  //Enter the tooltip arrow change to a size in pixels:
  pendo.TOOLTIP_ARROW_SIZE = ##;

  pendo.initialize({...

Adjusting the CSS Classes

Once you get to the CSS tab you wish to edit, there are 8 CSS classes that have to be manipulated in order to change the color of the arrow on the guide:

._pendo-guide-arrow-top_ {
  border-bottom-color: #4D443F;
}

._pendo-guide-arrow-left_ {
  border-right-color: #4D443F;
}

._pendo-guide-arrow-right_ {
  border-left-color: #4D443F;
}

._pendo-guide-arrow-bottom_ {
  border-top-color: #4D443F;
}

._pendo-guide-arrow-border-top_ {
  border-bottom-color: #4D443F;
}

._pendo-guide-arrow-border-left_ {
  border-right-color: #4D443F;
}

._pendo-guide-arrow-border-right_ {
  border-left-color: #4D443F;
}

._pendo-guide-arrow-border-bottom_ {
  border-top-color: #4D443F;
}

One thing you’ll notice when looking at the attribute and values is that we are not using a normally expected background-color attribute. We are instead creating the arrow by manipulating different aspects of the border attribute (i.e. border-top-color). In this same way you could also manipulate other aspects of the arrow, such as size by editing border-top, border-left, etc.