Add simple arrow styling to the documentation

Author: placodermCreated Sep 3, 2024Updated Sep 3, 2024

Labels💎 enhancement

Problem

The documentation for arrow styling is missing a simple explanation.

Solution

It is possible to style an arrow simply with:

css

.tippy-arrow {
color: black
}

Why not just include this? I wasted so much time playing with this:

.tippy-box[data-theme~='tomato'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: tomato;
}
.tippy-box[data-theme~='tomato'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: tomato;
}
.tippy-box[data-theme~='tomato'][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: tomato;
}
.tippy-box[data-theme~='tomato'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: tomato;
}

Thanks for tippy.js!

Source: atomiks/tippyjs

View original on GitHub View discussion on GitHub