smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: auto-position tooltip and suport overflowing container (#3631)

Browse source
This commit is contained in:
David Luzar 2021-05-25 13:52:04 +02:00 • committed by GitHub
parent 0bbb4535cf
commit 357266e9ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 100 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

67
src/components/Tooltip.scss
View file

@ -1,58 +1,25 @@
@import "../css/variables.module";
.excalidraw {
.Tooltip {
position: relative;
}
.excalidraw-tooltip {
position: absolute;
z-index: 1000;
.Tooltip__label {
--arrow-size: 4px;
visibility: hidden;
background: $oc-black;
color: $oc-white;
text-align: center;
border-radius: 6px;
padding: 8px;
position: absolute;
z-index: 10;
font-size: 13px;
line-height: 1.5;
font-weight: 500;
// extra pixel offset for unknown reasons
left: calc(50% + var(--arrow-size) / 2 - 1px);
transform: translateX(-50%);
word-wrap: break-word;
padding: 8px;
border-radius: 6px;
box-sizing: border-box;
pointer-events: none;
word-wrap: break-word;
&::after {
content: "";
border: var(--arrow-size) solid transparent;
position: absolute;
left: calc(50% - var(--arrow-size));
}
background: $oc-black;
&--above {
bottom: calc(100% + var(--arrow-size) + 3px);
line-height: 1.5;
text-align: center;
font-size: 13px;
font-weight: 500;
color: $oc-white;
&::after {
border-top-color: $oc-black;
top: 100%;
}
}
display: none;
&--below {
top: calc(100% + var(--arrow-size) + 3px);
&::after {
border-bottom-color: $oc-black;
bottom: 100%;
}
}
}
.Tooltip:hover .Tooltip__label {
visibility: visible;
}
.Tooltip__label:hover {
visibility: visible;
&.excalidraw-tooltip--visible {
display: block;
}
}