How to target Bricks data-balloon tooltips

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

Below is an image of a simple copy URL button I made (functionality won’t be explored here) where a user can hover on the button and the following, default-styled tooltip will pop up:

On button click, the pre-styled attribute selector takes priority:

Ignoring the button functionality, I used the following CSS to style the 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!