.glossary-tooltip {
display: inline;
position: relative;
z-index: 9999;
} .glossary-tooltip::after {
content: "";
position: absolute;
width: 100%;
height: 20px;
bottom: 100%;
left: 50%;
pointer-events: none;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.glossary-tooltip:hover::after,
.glossary-tooltip:focus::after,
.glossary-tooltip:active::after {
pointer-events: auto;
}
.glossary-tooltip a.glossary-external-link::after {
content: "";
display: inline-block;
margin-left: 5px;
width: 14px;
height: 16px;
background-size: 14px 16px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20height%3D%221024%22%20width%3D%22768%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M640%20768H128V257.90599999999995L256%20256V128H0v768h768V576H640V768zM384%20128l128%20128L320%20448l128%20128%20192-192%20128%20128V128H384z%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
mask-image: url("data:image/svg+xml,%3Csvg%20height%3D%221024%22%20width%3D%22768%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M640%20768H128V257.90599999999995L256%20256V128H0v768h768V576H640V768zM384%20128l128%20128L320%20448l128%20128%20192-192%20128%20128V128H384z%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
-webkit-mask-size: cover;
mask-size: cover;
background: black;
} .glossary-tooltip-content {
position: absolute;
z-index: 9999;
width: 300px;
left: 50%;
bottom: 100%;
line-height: 1.4;
text-align: center;
font-weight: 400;
color: #fffaf0;
background: transparent;
opacity: 0;
margin: 0 0 16px -150px;
cursor: default;
pointer-events: none;
-webkit-font-smoothing: antialiased;
-webkit-transition: opacity 0.3s 0.3s;
transition: opacity 0.3s 0.3s;
display:none;
}
.glossary-tooltip:hover .glossary-tooltip-content,
.glossary-tooltip:focus .glossary-tooltip-content,
.glossary-tooltip:active .glossary-tooltip-content {
opacity: 1;
position: absolute;
display: block !important;
visibility: visible !important;
top: unset;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.glossary-tooltip-content span {
display: block;
}
.glossary-tooltip-text {
border-bottom: 10px solid #fffaf0;
overflow: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform 0.3s 0.3s;
transition: transform 0.3s;
background: rgba(85, 61, 61, 0.95);
padding: 20px;
}
.glossary-tooltip:hover .glossary-tooltip-text {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
} .glossary-tooltip-content::after {
content: "";
bottom: -18px;
left: 50%;
border: solid transparent;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-top-color: #fffaf0;
border-width: 10px;
margin-left: -10px;
}
.glossary-underline {
text-decoration: underline;
}
.rtl .glossary-tooltip-content {
text-align: right;
}