Bootstrap tooltip bottom arrow

Hi there,

I have a bootstrap tooltip that appears on the bottom of an element, but I can’t get the arrow to point upwards.

This is what I have, which has the arrow pointing down.

Can anyone help me make the arrow point upwards?

I think it’s just the border part.

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
    content: "";
    border-width: 7px 7px 0;
    border-top-color: #fe0b5b;
	-webkit-font-smoothing: antialiased;
	margin-bottom: 5px;
}

Thanks

Have you checked the documentation?

I would have thought that the arrow direction and placement would be automatic if you had set the tooltip to be at the bottom with the data attribute.

I haven’t played with bootstrap for a while so would need to see a demo to help more :slight_smile:

1 Like

I have the arrow at the bottom, but it’s upside down.

image

I’m guessing I need to change this part:
border-width: 7px 7px 0;

to have the triangle point upwards

Yes you could just change the border top and bottom values around in that snippet and that should change the arrow.

However, I’m guessing that bootstrap would have done that automatically for you if you had set it up right.

Alternatively you could have thrown a transform:rotate(180deg) at the element to make it point up but it all depends on how its attached to your tooltip as you may displace the arrow form its connection point.

1 Like

Thanks, yes I had it set up correctly, but I had recoloured parts of the tooltip and not the arrow. I have fixed it by using this:

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #fe0b5b;
}
1 Like