<style>
#cursorTooltip {
background-color: rgba(var(--color-scrim-rgb), .8);
border-radius: 8px;
left: var(--offset-left);
padding: 6px 12px;
pointer-events: none;
position: absolute;
transform: translateX(-50%);
transition: opacity 200ms ease-out;
top: var(--offset-top);
}
#cursorTooltipContainer.hidden {
visibility: hidden;
}
.tooltip-text {
color: var(--color-overlay-button-label);
font-size: 12px;
line-height: 20px;
vertical-align: middle;
}
</style>
<div id="cursorTooltipContainer"
class$="[[getHiddenCursorClass(currentTooltip, isPointerInsideViewport,
canShowTooltipFromPrefs, forceTooltipHidden)]]">
<div id="cursorTooltip">
<span class="tooltip-text">[[tooltipMessage]]</span>
</div>
</div>