You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Feb 27, 2018. It is now read-only.
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).
The text was updated successfully, but these errors were encountered:
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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 at25px
and 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).The text was updated successfully, but these errors were encountered: