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

Improve interactive tooltip safe mousing area

Browse source 
This adds a more complex trapezoidal safe area between the button that triggers
the tooltip and the tooltip itself. It should be easier to move from the button
into the tooltip without accidentally closing it.

Fixes https://github.com/vector-im/riot-web/issues/10185
This commit is contained in:
J. Ryan Stinnett 2019-07-11 17:31:05 +01:00
parent 1cdfff850c
commit fc8cdc5661
2 changed files with 138 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

7
res/css/views/messages/_MessageActionBar.scss
View file

@ -36,12 +36,13 @@ limitations under the License.
&::before {
content: '';
position: absolute;
// tooltip overhang + action bar + action bar offset from event
width: calc(48px + 100% + 8px);
// tooltip safe mousing area + tooltip overhang +
// action bar + action bar offset from event
width: calc(10px + 48px + 100% + 8px);
// safe area + action bar
height: calc(20px + 100%);
top: -20px;
left: -48px;
left: -58px;
z-index: -1;
cursor: initial;
}