Customizing twitter bootstrap popover arrow
Solution 1
Twitter Bootstrap is based on Less.
If you want to change the appearance of its arrows use the bootstrap less variables to do so.
// Tooltips and popovers
// -------------------------
@tooltipColor: #fff;
@tooltipBackground: #000;
@tooltipArrowWidth: 5px;
@tooltipArrowColor: @tooltipBackground;
@popoverBackground: #fff;
@popoverArrowWidth: 10px;
@popoverArrowColor: #fff;
@popoverTitleBackground: darken(@popoverBackground, 3%);
// Special enhancement for popovers
@popoverArrowOuterWidth: @popoverArrowWidth + 1;
@popoverArrowOuterColor: rgba(0,0,0,.25);
If you are using Sass instead do the same with the Sass Variables.
Sadly the TB-Customizer doesn't have all the variables so you might have to compile it on your own.
Edit:
Good news the new Bootstrap 3 customizer now provides these options.
Solution 2
For anyone using a custom style.css to simply overwrite bootstrap without recompiling the LESS, the css rule you're looking for is .popover.top > .arrow:after { border-top-color: yourColorHere; }
to change the color of just the arrow.
Solution 3
Use these variables to customize tooltips:
@tooltip-max-width: 200px;
@tooltip-color: #FFF;
@tooltip-bg: #000;
@tooltip-opacity: .9;
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: #000;
Check the docs here: http://getbootstrap.com/customize/#tooltips
SoManyGoblins
Updated on December 27, 2020Comments
-
SoManyGoblins over 3 years
I could not find any relevant information on this, but I find it hard to swallow that it's not doable.
How can I customise the arrow for the popovers? I already did but changing the classes .arrow and such, but the position of the popover gets screwed up.
So, what is the correct way to do so? I couldn't find any documentation.
Following are the classes I've been using, so far the arrow looks wrong:
.popover { position: absolute; top: 0; left: 0; z-index: 1010; display: none; padding: 5px; } .popover.top { margin-top: -5px; } .popover.right { margin-left: 5px; } .popover.bottom { margin-top: 5px; } .popover.left { margin-left: -5px; } .popover.top .arrow { bottom: 0; left: 50%; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #000000; } .popover.right .arrow { top: 50%; left: 0; margin-top: -5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #000000; } .popover.bottom .arrow { top: 0px; left: 50%; margin-left: -5px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 19px solid #000000; } .popover.left .arrow { top: 50%; right: 0; margin-top: -5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #000000; } .popover .arrow { position: absolute; width: 0; height: 0; } .popover-inner { padding: 3px; width: auto; overflow: hidden; background: #000000; background: rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); } .popover-title { padding: 9px 15px; line-height: 1; background-color: #252525; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; background-color: rgba(37, 37, 37, 0.7); font-size: 14px; color: #7e7e7e; } .popover-content { padding: 14px; background-color: #252525; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; background-color: rgba(37, 37, 37, 0.7); } .popover-content p, .popover-content ul, .popover-content ol { margin-bottom: 0; } .popover-content table { background: transparent; } .popover-content table td { border: 0px; background: transparent; color: #7e7e7e; }
The arrow should be pointing to the red square
Thanks.
-
simondelliott over 9 yearsThis fix worked well for me once I changed it to
border-top-color: myColorHere;
-
Fafaman almost 9 yearsSuperb! of course works with bottom popovers also:
.popover.bottom > .arrow:after { border-bottom-color: YourColorHere;}