here is the plunker code. http://plnkr.co/edit/C1khFJqTUutDaK9ad7ud?p=preview
I need to change the tooltip arrow. the position of the tooltips in the example is top, bottom and left.
Can someone let me know how to style these tooltips. I need to color the tooltip arrow differently for different locations of tooltip.
for e.g
tooltip at top-> arrow color should be red
tooltip at bottom-> arrow color green
tooltip at left-> arrow color yellow
Can someone let me know how to get those classes and apply the color to these tooltips.
Here is the code
HTML
<div ng-controller="TooltipDemoCtrl">
<br><br><br>
<div ng-class="{'has-error' : !inputModel}">
<input type="text" ng-model="inputModel" class="test"
uib-tooltip="Tooltip TBD"
tooltip-placement="top"
tooltip-trigger="mouseenter"
tooltip-enable="!inputModel" />
</div>
</div>
CSS
.tooltip .tooltip-inner {
color: white;
background-color: blue;
border-radius:5px;
}
.tooltip .tooltip-arrow {
//cant get the class for the arrow
}
With Bootstrap 5 you might be wondering how to change the tooltip arrow. It's quite simple, you have to target each tooltip position and change the border color of each . tooltip-arrow pseudo-element regarding their positions.
Step 2: We will create an element with an icon and its tooltip value. Step 3: Now, we will use jQuery Code to add tooltip to the icon element and add its placement position. Step 4: At last, we will add CSS styles on tooltip element to change the color of the tooltip element.
You can add different Bootstrap 5 tooltip directions by changing top , right , left , bottom in the data-bs-palcement . By aiming . tooltip-inner and . tooltip-arrow::before , you can change the color.
Tooltip Arrows To create an arrow that should appear from a specific side of the tooltip, add "empty" content after tooltip, with the pseudo-element class ::after together with the content property. The arrow itself is created using borders. This will make the tooltip look like a speech bubble.
Try this, example for top
.tooltip.top .tooltip-arrow {
border-top-color: red!important;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With