Menu
I'm trying to style tootltips using
.tooltip-inner{} But i'm having troubles cause i can't find how to style tooltip small arrow.
As shown on screenshot the arrow of the tooltip is black i want to add new color on that:
any suggestion?
287
Position the arrow inside the tooltip: top: 100% will place the arrow at the bottom of the tooltip. left: 50% will center the arrow. Note: The border-width property specifies the size of the arrow. If you change this, also change the margin-left value to the same.
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.
The tooltip position can be changed by using the radio button click event. The arrow tip pointer can also be disabled by using the showTipPointer property in a tooltip.
With CSS, you can add a small arrow to the tooltip, using :after. With that, use the content property as well.
You can use this to change tooltip-arrow color
.tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-bottom-color: #000000; /* black */ border-width: 0 5px 5px; } Use this style sheet to get you started !
.tooltip{ position:absolute; z-index:1020; display:block; visibility:visible; padding:5px; font-size:11px; opacity:0; filter:alpha(opacity=0) } .tooltip.in{ opacity:.8; filter:alpha(opacity=80) } .tooltip.top{ margin-top:-2px } .tooltip.right{ margin-left:2px } .tooltip.bottom{ margin-top:2px } .tooltip.left{ margin-left:-2px } .tooltip.top .tooltip-arrow{ bottom:0; left:50%; margin-left:-5px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #000 } .tooltip.left .tooltip-arrow{ top:50%; right:0; margin-top:-5px; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:5px solid #000 } .tooltip.bottom .tooltip-arrow{ top:0; left:50%; margin-left:-5px; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:5px solid #000 } .tooltip.right .tooltip-arrow{ top:50%; left:0; margin-top:-5px; border-top:5px solid transparent; border-bottom:5px solid transparent; border-right:5px solid #000 } .tooltip-inner{ max-width:200px; padding:3px 8px; color:#fff; text-align:center; text-decoration:none; background-color:#000; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px } .tooltip-arrow{ position:absolute; width:0; height:0 } 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
