<style include="cr-shared-style">
:host {
--cr-link-color: var(--cros-tooltip-link-color);
--cr-tooltip-icon-fill-color: var(--cros-sys-on_surface_variant);
display: flex; /* Position independently from the line-height. */
}
iron-icon {
--iron-icon-fill-color: var(--cr-tooltip-icon-fill-color);
--iron-icon-height: var(--cr-icon-size);
--iron-icon-width: var(--cr-icon-size);
}
#tooltip {
--paper-tooltip-background: var(--cros-tooltip-background-color);
--paper-tooltip-border-radius: 4px;
--paper-tooltip-padding: 5px 8px;
--paper-tooltip-text-color: var(--cros-tooltip-label-color);
font: var(--cros-annotation-1-font);
}
</style>
<iron-icon id="indicator" tabindex="0" aria-label$="[[iconAriaLabel]]"
aria-describedby="tooltip" icon="[[iconClass]]" role="img">
</iron-icon>
<paper-tooltip id="tooltip"
for="indicator" position="[[tooltipPosition]]"
fit-to-visible-bounds part="tooltip" aria-hidden="true">
<slot name="tooltip-text">[[tooltipText]]</slot>
</paper-tooltip>