Tippyjs: Styling the Arrow

[JakeHenshall]

Hi,

Love this soo much, incredibly user friendly and great documentation. I'm just trying to style the arrow a different colour, how would one go about doing such a thing.

I've got this in here:

.tippy-tooltip.mythemename-theme [x-arrow] {
/* Your arrow styling here. */
}

But both background / background-color and color both don't change the arrow colour.

Jake.

[atomiks]

Since v0.9, it's a CSS triangle because browsers had trouble rendering sharp points with the rotate method (used to be a rotated square, which made it easier to style 😢 ).

So for a top-positioned tooltip with an arrow pointing down:

.tippy-tooltip.mythemename-theme [x-arrow] {
    border-top: 7px solid $color; /* your color here */
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

'small' is 5px and 'big' is 9px. You can override this anyway and use the rotate method if you'd like.

Keep in mind that tooltips flip and I think it needed higher specificity, so you might actually need to do this...

.tippy-popper[x-placement=top] .tippy-tooltip.mythemename-theme [x-arrow] {
    border-top: 7px solid $color; /* your color here */
}

.tippy-popper[x-placement=bottom] .tippy-tooltip.mythemename-theme [x-arrow] {
    border-bottom: 7px solid $color; /* your color here */
}

[JakeHenshall]

Spot on sir, works a treat 👍

[nathan-fiscaletti]

This doesn't seem to work when the tooltip is on the right of the element. If i set the border-left property, i end up with an arrow that's pointing the wrong direction but in the right spot.

[nathan-fiscaletti]

I believe i figured it out.

/* Right placement tooltip arrow (arrow will be on left side of tooltip) */
.tippy-popper[x-placement^=right] .tippy-tooltip.mytheme-theme .tippy-arrow {
    border-right: 7px solid $color; /* your color here */
}

/* Left placement tooltip arrow (arrow will be on right side of tooltip) */
.tippy-popper[x-placement^=left] .tippy-tooltip.mytheme-theme .tippy-arrow {
    border-left: 7px solid $color; /* your color here */
}

/* Top placement tooltip arrow (arrow will be on bottom side of tooltip) */
.tippy-popper[x-placement^=top] .tippy-tooltip.mytheme-theme .tippy-arrow {
    border-top: 7px solid $color; /* your color here */
}

/* Bottom placement tooltip arrow (arrow will be on top side of tooltip) */
.tippy-popper[x-placement^=bottom] .tippy-tooltip.mytheme-theme .tippy-arrow {
    border-bottom: 7px solid $color; /* your color here */
}

[baltazarz3]

Thanks guys for your comments, I'll share what it worked for me for both arrow types:

/* For triangle arrow (Sharp) */
.tippy-popper[x-placement^=right] .tippy-tooltip.mytheme-theme .tippy-arrow { border-right: 7px solid #ff0000; }
.tippy-popper[x-placement^=left] .tippy-tooltip.mytheme-theme .tippy-arrow { border-left: 7px solid #ff0000; }
.tippy-popper[x-placement^=top] .tippy-tooltip.mytheme-theme .tippy-arrow { border-top: 7px solid #ff0000; }
.tippy-popper[x-placement^=bottom] .tippy-tooltip.mytheme-theme .tippy-arrow { border-bottom: 7px solid #ff0000; }

/* For SVG arrow (Round) */
.tippy-popper[x-placement^=right] .tippy-tooltip.mytheme-theme .tippy-roundarrow { fill: #ff0000; }
.tippy-popper[x-placement^=left] .tippy-tooltip.mytheme-theme .tippy-roundarrow { fill: #ff0000; }
.tippy-popper[x-placement^=top] .tippy-tooltip.mytheme-theme .tippy-roundarrow { fill: #ff0000; }
.tippy-popper[x-placement^=bottom] .tippy-tooltip.mytheme-theme .tippy-roundarrow { fill: #ff0000; }

[atomiks]

@baltazarz3 in the case of the round arrow, you don't need to select a specific placement as the style remains the same.

.tippy-tooltip.mytheme-theme .tippy-roundarrow { 
  fill: #ff0000; 
}

[TheSmedegaard]

I changed the arrow color for my top positioned tooltips as follows:

.tippy-box[data-placement^="top"] > .tippy-arrow:before {
  border-top-color: #f1f1f1 !important; /* set your color here and use the !important property */
}