.elementor-has-tooltip {
position: relative;
} .elementor-tooltip-content {
visibility: hidden;
opacity: 0;
position: absolute;
text-align: center;
transition: all 0.3s ease;
pointer-events: none;
z-index: 9999;
max-width: 300px;
background-color: #000;
color: #fff;
border-radius: 3px;
padding: 10px 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
font-family: inherit; display: flex;
justify-content: center;
align-items: center;
min-height: 40px;
} .tooltip-top {
bottom: calc(100% + 20px); left: 50%;
transform: translateX(-50%);
}
.tooltip-right {
top: 50%;
left: calc(100% + 20px); transform: translateY(-50%);
}
.tooltip-bottom {
top: calc(100% + 20px); left: 50%;
transform: translateX(-50%);
}
.tooltip-left {
top: 50%;
right: calc(100% + 20px); transform: translateY(-50%);
} .elementor-tooltip-content::after {
content: "";
position: absolute;
border-width: 5px;
border-style: solid;
}
.tooltip-top::after {
top: 100%;
left: 50%;
margin-left: -5px;
border-color: #000 transparent transparent transparent;
}
.tooltip-right::after {
top: 50%;
right: 100%;
margin-top: -5px;
border-color: transparent #000 transparent transparent;
}
.tooltip-bottom::after {
bottom: 100%;
left: 50%;
margin-left: -5px;
border-color: transparent transparent #000 transparent;
}
.tooltip-left::after {
top: 50%;
left: 100%;
margin-top: -5px;
border-color: transparent transparent transparent #000;
}  .elementor-has-tooltip[data-tooltip-animation="fade"]:hover .elementor-tooltip-content,
.elementor-has-tooltip[data-tooltip-animation="fade"][data-tooltip-trigger="click"].tooltip-active
.elementor-tooltip-content {
visibility: visible;
opacity: 1;
} .elementor-has-tooltip[data-tooltip-animation="slide"] .tooltip-top {
transform: translateX(-50%) translateY(10px);
}
.elementor-has-tooltip[data-tooltip-animation="slide"] .tooltip-bottom {
transform: translateX(-50%) translateY(-10px);
}
.elementor-has-tooltip[data-tooltip-animation="slide"] .tooltip-left {
transform: translateY(-50%) translateX(10px);
}
.elementor-has-tooltip[data-tooltip-animation="slide"] .tooltip-right {
transform: translateY(-50%) translateX(-10px);
}
.elementor-has-tooltip[data-tooltip-animation="slide"]:hover .tooltip-top,
.elementor-has-tooltip[data-tooltip-animation="slide"]:hover .tooltip-bottom,
.elementor-has-tooltip[data-tooltip-animation="slide"][data-tooltip-trigger="click"].tooltip-active .tooltip-top,
.elementor-has-tooltip[data-tooltip-animation="slide"][data-tooltip-trigger="click"].tooltip-active .tooltip-bottom {
visibility: visible;
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.elementor-has-tooltip[data-tooltip-animation="slide"]:hover .tooltip-left,
.elementor-has-tooltip[data-tooltip-animation="slide"]:hover .tooltip-right,
.elementor-has-tooltip[data-tooltip-animation="slide"][data-tooltip-trigger="click"].tooltip-active .tooltip-left,
.elementor-has-tooltip[data-tooltip-animation="slide"][data-tooltip-trigger="click"].tooltip-active .tooltip-right {
visibility: visible;
opacity: 1;
transform: translateY(-50%) translateX(0);
} .elementor-has-tooltip[data-tooltip-animation="scale"] .elementor-tooltip-content {
transform-origin: center bottom;
transform: scale(0.8);
}
.elementor-has-tooltip[data-tooltip-animation="scale"]:hover .elementor-tooltip-content,
.elementor-has-tooltip[data-tooltip-animation="scale"][data-tooltip-trigger="click"].tooltip-active
.elementor-tooltip-content {
visibility: visible;
opacity: 1;
transform: scale(1);
} .tooltip-top {
bottom: 125%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 10px; z-index: 9999; } .tooltip-top::after {
content: "";
position: absolute;
top: 100%; left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #000 transparent transparent transparent;
} .elementor-has-tooltip[data-tooltip-position="top"]:hover .elementor-tooltip-content,
.elementor-has-tooltip[data-tooltip-position="top"][data-tooltip-trigger="click"].tooltip-active
.elementor-tooltip-content {
visibility: visible !important;
opacity: 1 !important;
transform: translateX(-50%) translateY(0) !important;
pointer-events: auto;
display: flex !important;
justify-content: center;
align-items: center;
min-height: 40px;
} .elementor-tooltip-content.tooltip-top {
text-align: center;
width: auto;
min-width: 120px;
max-width: 300px;
padding: 10px 15px;
z-index: 9999;
overflow: visible;
display: flex;
justify-content: center;
align-items: center;
} @media (max-width: 767px) {
.elementor-tooltip-content {
max-width: 200px;
padding: 8px 12px;
display: flex;
justify-content: center;
align-items: center;
}
}