@enact/sandstone/TooltipDecorator/Tooltip.module.css

Large-screen/TV support library for Enact, containing a variety of UI components.

.tooltip {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.tooltip .tooltipArrow {
  position: absolute;
  width: 0.52083rem;
  height: 0.52083rem;
  z-index: 1;
}
.tooltip .tooltipArrow::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}
.tooltip.rightArrow .tooltipArrow,
.tooltip.leftArrow .tooltipArrow {
  width: 0.52083rem;
  height: 0.52083rem;
}
.tooltip.centerArrow .tooltipArrow {
  width: 0.52083rem;
  height: 0.52083rem;
  left: 50%;
}
.tooltip.middleArrow .tooltipArrow {
  width: 0.52083rem;
  height: 0.52083rem;
  top: 50%;
}
.tooltip .tooltipLabel {
  --sand-tooltip-label-width: auto;
  font-family: "Sandstone";
  font-size: 1.25rem;
  font-style: normal;
  font-kerning: normal;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5em;
  white-space: nowrap;
  width: var(--sand-tooltip-label-width);
  padding: 0.125rem 1rem;
  border-radius: 0.25rem;
}
:global(.enact-locale-non-latin) .tooltip .tooltipLabel {
  font-family: "Sandstone";
}
:global(.enact-locale-non-latin) .tooltip .tooltipLabel {
  font-family: "Sandstone";
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
}
:global(.enact-locale-right-to-left) .tooltip .tooltipLabel {
  text-align: right;
}
.tooltip .tooltipLabel.marquee {
  max-width: var(--sand-tooltip-label-width, 12.5rem);
}
.tooltip .tooltipLabel.multi {
  white-space: normal;
}
:global(.enact-locale-ja) .tooltip .tooltipLabel.multi {
  line-break: strict;
}
.tooltip.balloon {
  /* Needed to prevent global class being added in the DOM */
}
.tooltip.transparent .tooltipLabel {
  font-weight: normal;
  font-size: 0.75rem;
}
.tooltip.transparent .tooltipArrow {
  display: none;
}
.tooltip.transparent.below .tooltipLabel {
  margin-top: 0rem;
}
.tooltip.transparent.above .tooltipLabel {
  margin-bottom: 0rem;
}
.tooltip.transparent.left .tooltipLabel {
  margin-right: 0rem;
}
.tooltip.transparent.right .tooltipLabel {
  margin-left: 0rem;
}
.tooltip.below .tooltipArrow {
  top: 0;
}
.tooltip.below .tooltipLabel {
  margin-top: 0.375rem;
}
.tooltip.below.leftArrow .tooltipArrow {
  right: 0;
  overflow: hidden;
}
.tooltip.below.leftArrow .tooltipArrow::after {
  left: 0;
  transform-origin: top right;
  transform: rotate(-45deg) skew(-45deg, -5deg);
}
.tooltip.below.leftArrow .tooltipLabel {
  text-align: right;
  border-top-right-radius: 0;
}
.tooltip.below.centerArrow .tooltipArrow {
  left: 50%;
}
.tooltip.below.centerArrow .tooltipArrow::after {
  top: 0;
  transform-origin: top left;
  transform: rotate(45deg) skew(5deg, 5deg);
}
.tooltip.below.rightArrow .tooltipArrow {
  left: 0;
  overflow: hidden;
}
.tooltip.below.rightArrow .tooltipArrow::after {
  left: 0;
  transform-origin: top left;
  transform: rotate(45deg) skew(45deg, 5deg);
}
.tooltip.below.rightArrow .tooltipLabel {
  border-top-left-radius: 0;
}
.tooltip.above .tooltipArrow {
  bottom: 0;
}
.tooltip.above .tooltipLabel {
  margin-bottom: 0.375rem;
}
.tooltip.above.leftArrow .tooltipArrow {
  right: 0;
  overflow: hidden;
}
.tooltip.above.leftArrow .tooltipArrow::after {
  left: 0;
  transform-origin: bottom right;
  transform: rotate(45deg) skew(45deg, 5deg);
}
.tooltip.above.leftArrow .tooltipLabel {
  text-align: right;
  border-bottom-right-radius: 0;
}
.tooltip.above.centerArrow .tooltipArrow::after {
  bottom: 0;
  transform-origin: bottom left;
  transform: rotate(-45deg) skew(-5deg, -5deg);
}
.tooltip.above.rightArrow .tooltipArrow {
  left: 0;
  overflow: hidden;
}
.tooltip.above.rightArrow .tooltipArrow::after {
  left: 0;
  transform-origin: bottom left;
  transform: rotate(-45deg) skew(-45deg, -5deg);
}
.tooltip.above.rightArrow .tooltipLabel {
  border-bottom-left-radius: 0;
}
.tooltip.left .tooltipArrow {
  right: 0;
}
.tooltip.left .tooltipLabel {
  margin-right: calc( 0.375rem - 1px);
}
.tooltip.left.topArrow .tooltipArrow {
  bottom: 0;
  overflow: hidden;
}
.tooltip.left.topArrow .tooltipArrow::after {
  left: 0;
  transform-origin: bottom right;
  transform: rotate(-45deg) skew(5deg, 45deg);
}
.tooltip.left.topArrow .tooltipLabel {
  border-bottom-right-radius: 0;
}
.tooltip.left.middleArrow .tooltipArrow::after {
  right: 0;
  transform-origin: top right;
  transform: rotate(45deg) skew(-5deg, -5deg);
}
.tooltip.left.bottomArrow .tooltipArrow {
  overflow: hidden;
}
.tooltip.left.bottomArrow .tooltipArrow::after {
  left: 0;
  transform-origin: top right;
  transform: rotate(45deg) skew(5deg, -45deg);
}
.tooltip.left.bottomArrow .tooltipLabel {
  border-top-right-radius: 0;
}
.tooltip.right .tooltipArrow {
  left: 0;
}
.tooltip.right .tooltipLabel {
  margin-left: 0.375rem;
}
.tooltip.right.topArrow .tooltipArrow {
  bottom: 0;
  overflow: hidden;
}
.tooltip.right.topArrow .tooltipArrow::after {
  left: 0;
  transform-origin: bottom left;
  transform: rotate(45deg) skew(-5deg, -45deg);
}
.tooltip.right.topArrow .tooltipLabel {
  border-bottom-left-radius: 0;
}
.tooltip.right.middleArrow .tooltipArrow::after {
  left: 0;
  transform-origin: top left;
  transform: rotate(-45deg) skew(5deg, 5deg);
}
.tooltip.right.bottomArrow .tooltipArrow {
  overflow: hidden;
}
.tooltip.right.bottomArrow .tooltipArrow::after {
  left: 0;
  transform-origin: top left;
  transform: rotate(-45deg) skew(5deg, 45deg);
}
.tooltip.right.bottomArrow .tooltipLabel {
  border-top-left-radius: 0;
}
.tooltip.absolute {
  width: 0;
  height: 0;
  top: var(--tooltip-position-top);
  left: var(--tooltip-position-left);
}
.tooltip.absolute .tooltipAnchor {
  position: absolute;
}
.tooltip.absolute.below {
  top: calc(var(--tooltip-position-top) + 0.5rem );
}
.tooltip.absolute.below.transparent {
  top: calc(var(--tooltip-position-top) + 0rem );
}
.tooltip.absolute.below.leftArrow .tooltipAnchor {
  transform: translateX(-100%);
}
.tooltip.absolute.below.centerArrow .tooltipAnchor {
  transform: translateX(-50%);
}
.tooltip.absolute.below.rightArrow .tooltipAnchor {
  /* transform: translate(0, 0); */
}
.tooltip.absolute.above {
  top: calc(var(--tooltip-position-top) - 0.5rem );
}
.tooltip.absolute.above.transparent {
  top: calc(var(--tooltip-position-top) - 0rem );
}
.tooltip.absolute.above.leftArrow .tooltipAnchor {
  transform: translate(-100%, -100%);
}
.tooltip.absolute.above.centerArrow .tooltipAnchor {
  transform: translate(-50%, -100%);
}
.tooltip.absolute.above.rightArrow .tooltipAnchor {
  transform: translate(0, -100%);
}
.tooltip.absolute.left {
  left: calc(var(--tooltip-position-left) - 0.5rem );
}
.tooltip.absolute.left.transparent {
  left: calc(var(--tooltip-position-left) - 0rem );
}
.tooltip.absolute.left.topArrow .tooltipAnchor {
  transform: translate(-100%, -100%);
}
.tooltip.absolute.left.middleArrow .tooltipAnchor {
  transform: translate(-100%, -50%);
}
.tooltip.absolute.left.bottomArrow .tooltipAnchor {
  transform: translate(-100%, 0);
}
.tooltip.absolute.right {
  left: calc(var(--tooltip-position-left) + 0.5rem );
}
.tooltip.absolute.right.transparent {
  left: calc(var(--tooltip-position-left) + 0rem );
}
.tooltip.absolute.right.topArrow .tooltipAnchor {
  transform: translate(0, -100%);
}
.tooltip.absolute.right.middleArrow .tooltipAnchor {
  transform: translate(0, -50%);
}
.tooltip.absolute.right.bottomArrow .tooltipAnchor {
  /* transform: translate(0, 0); */
}
.tooltip.relative.below {
  top: calc(100% + 0.5rem );
}
.tooltip.relative.below.transparent {
  top: calc(100% + 0rem );
}
.tooltip.relative.below.leftArrow {
  right: 50%;
}
.tooltip.relative.below.centerArrow,
.tooltip.relative.below.rightArrow {
  left: 50%;
}
.tooltip.relative.below.centerArrow {
  transform: translateX(-50%);
}
.tooltip.relative.above {
  bottom: calc(100% + 0.5rem );
}
.tooltip.relative.above.transparent {
  bottom: calc(100% + 0rem );
}
.tooltip.relative.above.leftArrow {
  right: 50%;
}
.tooltip.relative.above.centerArrow,
.tooltip.relative.above.rightArrow {
  left: 50%;
}
.tooltip.relative.above.centerArrow {
  transform: translateX(-50%);
}
.tooltip.relative.left {
  right: calc(100% + 0.5rem );
}
.tooltip.relative.left.transparent {
  right: calc(100% + 0rem );
}
.tooltip.relative.left.topArrow {
  bottom: 50%;
}
.tooltip.relative.left.middleArrow,
.tooltip.relative.left.bottomArrow {
  top: 50%;
}
.tooltip.relative.left.middleArrow {
  transform: translateY(-50%);
}
.tooltip.relative.right {
  left: calc(100% + 0.5rem );
}
.tooltip.relative.right.transparent {
  left: calc(100% + 0rem );
}
.tooltip.relative.right.topArrow {
  bottom: 50%;
}
.tooltip.relative.right.middleArrow,
.tooltip.relative.right.bottomArrow {
  top: 50%;
}
.tooltip.relative.right.middleArrow {
  transform: translateY(-50%);
}
:global(.enact-locale-right-to-left) .tooltip {
  direction: ltr;
}
:global(.enact-locale-right-to-left) .tooltip .tooltipAnchor {
  direction: rtl;
}
.tooltip:global(.neutral) {
  filter: drop-shadow(0 0.375rem 0.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%));
}
.tooltip:global(.neutral).transparent {
  filter: none;
}
.tooltip:global(.neutral).transparent .tooltipLabel {
  color: #fff;
  background-color: transparent;
}
.tooltip:global(.neutral) .tooltipArrow::after {
  background: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
}
.tooltip:global(.neutral) .tooltipLabel {
  color: rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
}
:global(.enact-a11y-high-contrast) .tooltip:global(.neutral):global(.highContrast) {
  filter: drop-shadow(0 0.375rem 0.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%));
}
:global(.enact-a11y-high-contrast) .tooltip:global(.neutral):global(.highContrast).transparent {
  filter: none;
}
:global(.enact-a11y-high-contrast) .tooltip:global(.neutral):global(.highContrast).transparent .tooltipLabel {
  color: #fff;
  background-color: transparent;
}
:global(.enact-a11y-high-contrast) .tooltip:global(.neutral):global(.highContrast) .tooltipArrow::after {
  background: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
}
:global(.enact-a11y-high-contrast) .tooltip:global(.neutral):global(.highContrast) .tooltipLabel {
  color: rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
}
.tooltip:global(.light) {
  filter: drop-shadow(0 0.375rem 0.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%));
}
.tooltip:global(.light).transparent {
  filter: none;
}
.tooltip:global(.light).transparent .tooltipLabel {
  color: #fff;
  background-color: transparent;
}
.tooltip:global(.light) .tooltipArrow::after {
  background: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
}
.tooltip:global(.light) .tooltipLabel {
  color: rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
}
.tooltip:global(.game) {
  filter: drop-shadow(0 0.375rem 0.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%));
}
.tooltip:global(.game).transparent {
  filter: none;
}
.tooltip:global(.game).transparent .tooltipLabel {
  color: #fff;
  background-color: transparent;
}
.tooltip:global(.game) .tooltipArrow::after {
  background: var(--sand-focus-bg-color, #6d2fa1);
}
.tooltip:global(.game) .tooltipLabel {
  color: rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
  background-color: var(--sand-focus-bg-color, #6d2fa1);
}
:global(.green) .tooltip:global(.game) {
  filter: drop-shadow(0 0.375rem 0.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%));
}
:global(.green) .tooltip:global(.game).transparent {
  filter: none;
}
:global(.green) .tooltip:global(.game).transparent .tooltipLabel {
  color: #fff;
  background-color: transparent;
}
:global(.green) .tooltip:global(.game) .tooltipArrow::after {
  background: var(--sand-focus-bg-color, #3ea07d);
}
:global(.green) .tooltip:global(.game) .tooltipLabel {
  color: rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
  background-color: var(--sand-focus-bg-color, #3ea07d);
}
:global(.orange) .tooltip:global(.game) {
  filter: drop-shadow(0 0.375rem 0.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%));
}
:global(.orange) .tooltip:global(.game).transparent {
  filter: none;
}
:global(.orange) .tooltip:global(.game).transparent .tooltipLabel {
  color: #fff;
  background-color: transparent;
}
:global(.orange) .tooltip:global(.game) .tooltipArrow::after {
  background: var(--sand-focus-bg-color, #b85f23);
}
:global(.orange) .tooltip:global(.game) .tooltipLabel {
  color: rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
  background-color: var(--sand-focus-bg-color, #b85f23);
}