mirror of
https://github.com/livebook-dev/livebook.git
synced 2024-11-14 20:04:49 +08:00
162 lines
3.1 KiB
CSS
162 lines
3.1 KiB
CSS
/* Tooltips */
|
|
|
|
/*
|
|
Example usage:
|
|
|
|
<span class="tooltip top" data-tooltip="Delete">
|
|
...
|
|
</span>
|
|
*/
|
|
|
|
/* Tooltip element wrapping the actual hoverable element */
|
|
.tooltip {
|
|
position: relative;
|
|
display: flex;
|
|
--distance: 4px;
|
|
--arrow-size: 5px;
|
|
--arrow-side-offset: 10px;
|
|
--show-delay: 0.5s;
|
|
}
|
|
|
|
.tooltip.distant {
|
|
--distance: 28px;
|
|
}
|
|
|
|
.tooltip.distant-medium {
|
|
--distance: 10px;
|
|
}
|
|
|
|
/* Tooltip text */
|
|
.tooltip:before {
|
|
position: absolute;
|
|
content: attr(data-tooltip);
|
|
white-space: pre;
|
|
text-align: center;
|
|
display: block;
|
|
z-index: 100;
|
|
background-color: #1c273c;
|
|
color: #f0f5f9;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
border-radius: 4px;
|
|
padding: 3px 12px;
|
|
visibility: hidden;
|
|
transition-property: visibility;
|
|
transition-duration: 0s;
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
/* Tooltip arrow */
|
|
.tooltip:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
z-index: 100;
|
|
/* For the arrow we use the triangle trick: https://css-tricks.com/snippets/css/css-triangle/ */
|
|
border-width: var(--arrow-size);
|
|
border-style: solid;
|
|
border-color: #1c273c;
|
|
visibility: hidden;
|
|
transition-property: visibility;
|
|
transition-duration: 0s;
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
.tooltip:hover:before {
|
|
visibility: visible;
|
|
transition-delay: var(--show-delay);
|
|
}
|
|
|
|
.tooltip:hover:after {
|
|
visibility: visible;
|
|
transition-delay: var(--show-delay);
|
|
}
|
|
|
|
/*
|
|
Note: we let the arrow and content overlap 1px,
|
|
otherwise there's a tiny space between them.
|
|
*/
|
|
|
|
.tooltip.top:before {
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translate(-50%, calc(1px - var(--arrow-size) - var(--distance)));
|
|
}
|
|
|
|
.tooltip.top-right:before {
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translate(
|
|
calc(0px - var(--arrow-side-offset)),
|
|
calc(1px - var(--arrow-size) - var(--distance))
|
|
);
|
|
}
|
|
|
|
.tooltip.top:after,
|
|
.tooltip.top-right:after {
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translate(-50%, calc(0px - var(--distance)));
|
|
|
|
border-bottom: none;
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
}
|
|
|
|
.tooltip.bottom:before {
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translate(-50%, calc(var(--arrow-size) - 1px + var(--distance)));
|
|
}
|
|
|
|
.tooltip.bottom-left:before {
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translate(
|
|
calc(-100% + var(--arrow-side-offset)),
|
|
calc(var(--arrow-size) - 1px + var(--distance))
|
|
);
|
|
}
|
|
|
|
.tooltip.bottom:after,
|
|
.tooltip.bottom-left:after {
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translate(-50%, var(--distance));
|
|
|
|
border-top: none;
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
}
|
|
|
|
.tooltip.right:before {
|
|
top: 50%;
|
|
left: 100%;
|
|
transform: translate(calc(var(--arrow-size) - 1px + var(--distance)), -50%);
|
|
}
|
|
|
|
.tooltip.right:after {
|
|
top: 50%;
|
|
left: 100%;
|
|
transform: translate(var(--distance), -50%);
|
|
|
|
border-left: none;
|
|
border-top-color: transparent;
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
.tooltip.left:before {
|
|
top: 50%;
|
|
right: 100%;
|
|
transform: translate(calc(1px - var(--arrow-size) - var(--distance)), -50%);
|
|
}
|
|
|
|
.tooltip.left:after {
|
|
top: 50%;
|
|
right: 100%;
|
|
transform: translate(calc(0px - var(--distance)), -50%);
|
|
|
|
border-right: none;
|
|
border-top-color: transparent;
|
|
border-bottom-color: transparent;
|
|
}
|