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: Add tooltip with icon for embedding scenes (#2532)

Browse source 
Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Kartik Prajapati 2020-12-14 18:54:54 +05:30 • committed by GitHub
parent 4b32c03994
commit 60864ace54
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 78 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/components/Tooltip.scss
View file

@ -7,39 +7,56 @@
.Tooltip__label {
--arrow-size: 4px;
visibility: hidden;
width: 10ch;
background: $oc-black;
color: $oc-white;
text-align: center;
border-radius: 4px;
padding: 4px;
border-radius: 6px;
padding: 8px;
position: absolute;
z-index: 10;
font-size: 0.7rem;
font-size: 13px;
line-height: 1.5;
top: calc(100% + var(--arrow-size) + 3px);
font-weight: 500;
// extra pixel offset for unknown reasons
left: calc(-50% + var(--arrow-size) / 2 - 1px);
left: calc(50% + var(--arrow-size) / 2 - 1px);
transform: translateX(-50%);
word-wrap: break-word;
&::after {
content: "";
border: var(--arrow-size) solid transparent;
border-bottom-color: $oc-black;
position: absolute;
bottom: 100%;
left: calc(50% - var(--arrow-size));
}
&--above {
bottom: calc(100% + var(--arrow-size) + 3px);
&::after {
border-top-color: $oc-black;
top: 100%;
}
}
&--below {
top: calc(100% + var(--arrow-size) + 3px);
&::after {
border-bottom-color: $oc-black;
bottom: 100%;
}
}
}
// the following 3 rules ensure that the tooltip doesn't show (nor affect
// the cursor) when you drag over when you draw on canvas, but at the same
// time it still works when clicking on the link/shield
body:active .Tooltip:not(:hover) {
body:active & .Tooltip:not(:hover) {
pointer-events: none;
}
body:not(:active) .Tooltip:hover .Tooltip__label {
body:not(:active) & .Tooltip:hover .Tooltip__label {
visibility: visible;
}