imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Center tooltip along top or bottom of target

Browse source 
This adjusts the positioning to work more the way we want:

* Tooltip is position on the top or bottom edge of the target depending on where
  space is available
* Tooltip and chevron are centered

In addition, more bits borrowed from `ContextualMenu` are not needed, so they
have been removed for simplicity.

Part of https://github.com/vector-im/riot-web/issues/9753
Part of https://github.com/vector-im/riot-web/issues/9716
This commit is contained in:
J. Ryan Stinnett 2019-06-20 18:33:45 +01:00
parent 6dcdad028e
commit 32bf4588dd
2 changed files with 50 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

74
res/css/views/elements/_InteractiveTooltip.scss
View file

@ -39,79 +39,13 @@ limitations under the License.
z-index: 5001;
}
.mx_InteractiveTooltip_right {
right: 0;
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_right {
right: 8px;
}
.mx_InteractiveTooltip_chevron_right {
position: absolute;
right: -8px;
top: 0px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-left: 8px solid $menu-bg-color;
border-bottom: 8px solid transparent;
}
.mx_InteractiveTooltip_chevron_right::after {
content: '';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 7px solid $menu-bg-color;
border-bottom: 7px solid transparent;
position: absolute;
top: -7px;
right: 1px;
}
.mx_InteractiveTooltip_left {
left: 0;
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_left {
left: 8px;
}
.mx_InteractiveTooltip_chevron_left {
position: absolute;
left: -8px;
top: 0px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 8px solid $menu-bg-color;
border-bottom: 8px solid transparent;
}
.mx_InteractiveTooltip_chevron_left::after {
content: '';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid $menu-bg-color;
border-bottom: 7px solid transparent;
position: absolute;
top: -7px;
left: 1px;
}
.mx_InteractiveTooltip_top {
top: 0;
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
top: 8px;
}
.mx_InteractiveTooltip_chevron_top {
position: absolute;
left: 0px;
left: calc(50% - 8px);
top: -8px;
width: 0;
height: 0;
@ -132,17 +66,13 @@ limitations under the License.
top: 1px;
}
.mx_InteractiveTooltip_bottom {
bottom: 0;
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
bottom: 8px;
}
.mx_InteractiveTooltip_chevron_bottom {
position: absolute;
left: 0px;
left: calc(50% - 8px);
bottom: -8px;
width: 0;
height: 0;