/home/vianto5/ceibaresidencial.mx/wp-content/plugins/code-snippets/css/common
Edit: /home/vianto5/ceibaresidencial.mx/wp-content/plugins/code-snippets/css/common/_tooltips.scss (3635B)
$bg-color: rgb(19 18 18 / 90%);
.tooltip {
position: relative;
display: inline-block;
}
.tooltip-trigger {
display: inline-flex;
align-items: center;
background: transparent;
padding: 0;
margin: 0;
border: 0;
border-radius: 50%;
color: inherit;
font: inherit;
&:hover,
&:focus {
box-shadow: none;
}
&:focus-visible {
outline: 2px solid #2271b1;
outline-offset: 2px;
}
}
.tooltip::before,
.tooltip-content {
position: absolute;
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out,
transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transform: translate3d(0, 0, 0);
pointer-events: none;
@media (prefers-reduced-motion: reduce) {
transition-duration: 0.01s;
}
}
.tooltip::before {
z-index: 1001;
border: 6px solid transparent;
background: transparent;
content: "";
}
.tooltip-inline::before {
inset-block-start: 4px;
}
.tooltip-content {
z-index: 1000;
padding: 8px;
background-color: rgb(19 18 18 / 90%);
color: #fff;
border-radius: 6px;
position: absolute;
font-size: 12px;
font-weight: normal;
text-transform: none;
inline-size: max-content;
max-inline-size: 200px;
backdrop-filter: blur(3px);
.tooltip-block & {
margin-inline-start: -80px;
}
.tooltip-inline & {
margin-inline-start: 0;
margin-block-end: -16px;
}
.tooltip-inline.tooltip-start & {
inset-block-start: -50%;
}
}
.tooltip-block.tooltip-start {
&::before {
margin-inline-start: -6px;
margin-block-end: -12px;
border-block-start-color: $bg-color;
}
&::before, .tooltip-content {
inset-block-end: 100%;
inset-inline-start: 50%;
}
}
.tooltip-block.tooltip-end {
&::before {
margin-block: -12px 0;
border-block-start-color: transparent;
border-block-end-color: $bg-color;
}
&::before, .tooltip-content {
inset-block: 100% auto;
margin-inline-start: 25%;
}
.tooltip-content {
inset-inline-end: -70%;
}
}
.tooltip-inline.tooltip-start {
&::before {
inset-block-end: 50%;
margin-inline: 0 -12px;
margin-block-end: 0;
border-block-start-color: transparent;
border-inline-start-color: $bg-color;
}
&::before, .tooltip-content {
inset-inline: auto 100%;
}
}
.tooltip-inline.tooltip-end {
&::before {
margin-block-end: 0;
margin-inline-start: -12px;
border-block-start-color: transparent;
border-inline-end-color: $bg-color;
}
&::before, .tooltip-content {
inset-inline-start: 100%;
}
.tooltip-content {
inset-block-start: -50%;
}
}
.tooltip:hover,
.tooltip:focus,
.tooltip:focus-within {
&::before, .tooltip-content {
visibility: visible;
opacity: 1;
}
}
.tooltip-block.tooltip-start:hover,
.tooltip-block.tooltip-start:focus,
.tooltip-block.tooltip-start:focus-within {
&::before, .tooltip-content {
transform: translateY(-10px);
}
}
.tooltip-block.tooltip-end:hover,
.tooltip-block.tooltip-end:focus,
.tooltip-block.tooltip-end:focus-within {
&::before, .tooltip-content {
transform: translateY(10px);
}
}
.tooltip-inline.tooltip-end:hover,
.tooltip-inline.tooltip-end:focus,
.tooltip-inline.tooltip-end:focus-within {
&::before, .tooltip-content {
transform: translateX(calc(10px * var(--cs-direction-multiplier)));
}
}
.tooltip-inline.tooltip-start:hover,
.tooltip-inline.tooltip-start:focus,
.tooltip-inline.tooltip-start:focus-within {
&::before, .tooltip-content {
transform: translateX(calc(-10px * var(--cs-direction-multiplier)));
}
}
.help-tooltip {
cursor: help !important;
.tooltip-trigger {
cursor: help;
}
.dashicons {
color: lightslategrey;
}
&.badge {
display: inline-flex;
.dashicons {
color: inherit;
}
}
}