How to target Bricks data-balloon tooltips

Bricks Builder comes with balloon.css already built in. This allows you to quickly and easily create tooltips for interactive items. Here is how to style it!

Finding the right selector(s)

The data-balloon attribute (assuming you already know how to use this or read this guide) has two main selectors which should be styled together.

Firstly, is the main body of the tooltip which uses the following selector:

.your-interactive-element[data-balloon]:after {
  /* your custom css */
}

The second part of the tooltip is the directional “corner” of the tooltip which uses the following selector:

.your-interactive-element[data-balloon]:before {
  /* your custom css */
}

It is important to note that the shape of this selector is formed using borders and therefore that is what needs to be styled.

Example

I used the following CSS to style a default data-balloon tooltip:

.my-copy-button[data-balloon="Copied!"]:after {
  background-color: #33cc99;
  color: #000;
}

.my-copy-button[data-balloon="Copied!"]:before {
  border-top-color: #33cc99;
}

It really is as simple as that!