I was going to ask if anyone had done any additional positioning for popovers (e.g., below and to the right), but once I looked into the code, it seemed pretty easy to add custom positioning. So I just wanted to add this as a quickie tutorial for anyone else interested.
For a Popover that is positioned below and to the right do the following:
In the CSS add:
.popover.belowRight .arrow{top:-4px;left:25px;margin-left:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid rgba(0, 0, 0, 0.3);} .popover.belowRight:after{top:0;left:25px;margin-left:-11px;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:11px solid #ffffff;content:' ';} .popover.belowRight:after{position:absolute;width:0;height:0;} // Combine it with the others
in bootstrap-twipsy.js find the switch statement and add the case to position the popover:
case 'belowRight': tp = {top: pos.top + pos.height + this.options.offset, left: pos.left - 20} break
Then just set your popover's placement to "belowRight". Pretty simple, right? You'll notice that I positioned the arrow at 25px and the popover at pos.left-20. This is to bring it pretty close to the left edge while keeping the arrow from sticking out. Just fiddle with those numbers if you want the arrow farther to the right (and the popover farther to the left).
I was going to ask if anyone had done any additional positioning for popovers (e.g., below and to the right), but once I looked into the code, it seemed pretty easy to add custom positioning. So I just wanted to add this as a quickie tutorial for anyone else interested.
For a Popover that is positioned below and to the right do the following:
In the CSS add:
.popover.belowRight .arrow{top:-4px;left:25px;margin-left:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid rgba(0, 0, 0, 0.3);} .popover.belowRight:after{top:0;left:25px;margin-left:-11px;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:11px solid #ffffff;content:' ';} .popover.belowRight:after{position:absolute;width:0;height:0;} // Combine it with the othersin bootstrap-twipsy.js find the switch statement and add the case to position the popover:
case 'belowRight': tp = {top: pos.top + pos.height + this.options.offset, left: pos.left - 20} breakThen just set your popover's placement to "
belowRight". Pretty simple, right? You'll notice that I positioned the arrow at25pxand the popover atpos.left-20. This is to bring it pretty close to the left edge while keeping the arrow from sticking out. Just fiddle with those numbers if you want the arrow farther to the right (and the popover farther to the left).