Bootstrap tooltip bottom arrow

[toolman]

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

[PaulOB]

@toolman

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

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

[toolman]

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

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

to have the triangle point upwards

[PaulOB]

@toolman

I’m guessing I need to change this part:

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

CSS Triangle | CSS-Tricks

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.

[toolman]

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;
}