New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styling the Arrow #35

Closed
JakeHenshall opened this Issue Apr 26, 2017 · 6 comments

Comments

Projects
None yet
4 participants
@JakeHenshall

JakeHenshall commented Apr 26, 2017

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

This comment has been minimized.

Owner

atomiks commented Apr 26, 2017

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

This comment has been minimized.

JakeHenshall commented Apr 26, 2017

Spot on sir, works a treat 👍

@nathan-fiscaletti

This comment has been minimized.

nathan-fiscaletti commented Apr 30, 2018

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

This comment has been minimized.

nathan-fiscaletti commented Apr 30, 2018

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

This comment has been minimized.

baltazarz3 commented Sep 13, 2018

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

This comment has been minimized.

Owner

atomiks commented Sep 13, 2018

@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; 
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment