Enhance Positioning Options for Tooltips & Popovers #22264
Conversation
IdanCo
changed the title
|
Hi @IdanCo, is it possible for you to post a JSBin with your modifications ? |
|
sure - http://jsbin.com/lijalowata/edit?html,output I just copied the CSS and JS from the dist folder. Hope it's ok, couldn't think of a smarter way. |
IdanCo
force-pushed
the
feature/tooltip_positioning
branch
from
1216812 to
0e30583
Compare
|
IMO this PR is good to go 👍 Any CSS feedbacks @mdo ? Or other feedbacks @bardiharborow ? |
|
I think it then makes sense to also implement this on Popovers. |
IdanCo
force-pushed
the
feature/tooltip_positioning
branch
from
9dfd12b to
a2d4d41
Compare
IdanCo
force-pushed
the
feature/tooltip_positioning
branch
3 times, most recently
from
67a2718 to
5a6e71a
Compare
scss/_popover.scss
Outdated
| top: initial; | ||
| bottom: $popover-arrow-outer-width - 1; | ||
| } | ||
| &::after { |
There was a problem hiding this comment.
Nesting should be no greater than 4, but was 5
scss/_popover.scss
Outdated
| } | ||
|
|
||
| &-bottom { | ||
| &::before { |
There was a problem hiding this comment.
Nesting should be no greater than 4, but was 5
scss/_popover.scss
Outdated
|
|
||
| &.bs-tether-element-attached { | ||
| &-top { | ||
| &::before, |
There was a problem hiding this comment.
Nesting should be no greater than 4, but was 5
scss/_popover.scss
Outdated
| right: $popover-arrow-outer-width - 1; | ||
| } | ||
| &::after { | ||
| left: initial; |
There was a problem hiding this comment.
Properties should be ordered right, left
scss/_popover.scss
Outdated
| left: initial; | ||
| right: $popover-arrow-outer-width - 1; | ||
| } | ||
| &::after { |
There was a problem hiding this comment.
Nesting should be no greater than 4, but was 5
scss/_popover.scss
Outdated
| right: $popover-arrow-outer-width - 1; | ||
| } | ||
| &::after { | ||
| left: initial; |
There was a problem hiding this comment.
Properties should be ordered right, left
scss/_popover.scss
Outdated
| left: initial; | ||
| right: $popover-arrow-outer-width - 1; | ||
| } | ||
| &::after { |
There was a problem hiding this comment.
Nesting should be no greater than 4, but was 5
scss/_popover.scss
Outdated
|
|
||
| &-right { | ||
| &::before { | ||
| left: initial; |
There was a problem hiding this comment.
Properties should be ordered right, left
scss/_popover.scss
Outdated
| } | ||
|
|
||
| &-right { | ||
| &::before { |
There was a problem hiding this comment.
Nesting should be no greater than 4, but was 5
scss/_popover.scss
Outdated
|
|
||
| &.bs-tether-element-attached { | ||
| &-left { | ||
| &::before, |
There was a problem hiding this comment.
Nesting should be no greater than 4, but was 5
IdanCo
force-pushed
the
feature/tooltip_positioning
branch
from
5a6e71a to
d43768c
Compare
|
Added a new commit which implements the same enhancement to the popovers, namely add 8 more positions to the existing 4. You can see it in action here - http://jsbin.com/voteco/edit?html,output I've also updated the docs for popovers accordingly (similar to the update in tootltips) - |
IdanCo
changed the title
IdanCo
force-pushed
the
feature/tooltip_positioning
branch
from
d43768c to
de3b266
Compare
|
Sorry but this PR is outdate with the merge of #22444 feel free to create a new one with Popper.js 😉 |
Summary:
Add more positioning options to the tooltip component, using tether's native attachment options. As requested in #17759 and #19921, and inspired by semantic UI tooltips. No breaking changes, still fully support previous params. Docs updated accordingly.
Before:
Tooltips supported only 4 positioning options: top | right | bottom | left
After:
Tooltips now have an optional secondary alignment option, for example
top leftorright bottom, summing up in 12 positioning options.