@syncfusion/react-popups/styles/tooltip/material.css

Syncfusion React popup package is a feature-rich collection of UI components such as Dialog and Tooltip, used to display contextual information or messages in separate pop-ups.

.sf-tooltip-wrap {
  max-width: calc(var(--sf-spacing) * 21.875);
  min-width: var(--sf-spacing-30);
  position: absolute;
}
.sf-tooltip-arrow-bottom {
  left: 50%;
  top: 100%;
}
.sf-tooltip-arrow-top {
  left: 50%;
  top: -9px;
}
.sf-tooltip-arrow-left {
  left: -9px;
  top: 48%;
}
.sf-tooltip-arrow-right {
  left: 100%;
  top: 50%;
}
.sf-tooltip-arrow-x {
  height: var(--sf-spacing-16);
  width: var(--sf-spacing-8);
}
.sf-tooltip-arrow-y {
  height: var(--sf-spacing-8);
  width: var(--sf-spacing-16);
}
.sf-tooltip-close {
  cursor: pointer;
  position: absolute;
  right: calc(var(--sf-spacing) * -0.625);
  top: calc(var(--sf-spacing) * -0.625);
  box-shadow: var(--sf-elevation-1);
  display: flex;
  padding: var(--sf-spacing-2);
}
.sf-tooltip-close svg {
  font-size: var(--sf-font-size-sm);
}
.sf-tooltip-content {
  overflow-x: hidden;
  padding: var(--sf-spacing-4) var(--sf-spacing-8);
  position: relative;
}
.sf-tooltip-wrap {
  background-color: rgb(var(--sf-color-inverse-surface));
  border-radius: var(--sf-radius-4);
  box-shadow: var(--sf-elevation-1);
}
.sf-tooltip-arrow-outer-bottom {
  border-left: var(--sf-spacing-8) solid transparent;
  border-right: var(--sf-spacing-8) solid transparent;
  border-top: var(--sf-spacing-8) solid rgb(var(--sf-color-inverse-surface));
}
.sf-tooltip-arrow-outer-top {
  border-bottom: var(--sf-spacing-8) solid rgb(var(--sf-color-inverse-surface));
  border-left: var(--sf-spacing-8) solid transparent;
  border-right: var(--sf-spacing-8) solid transparent;
}
.sf-tooltip-arrow-outer-left {
  border-bottom: var(--sf-spacing-8) solid transparent;
  border-right: var(--sf-spacing-8) solid rgb(var(--sf-color-inverse-surface));
  border-top: var(--sf-spacing-8) solid transparent;
}
.sf-tooltip-arrow-outer-right {
  border-bottom: var(--sf-spacing-8) solid transparent;
  border-left: var(--sf-spacing-8) solid rgb(var(--sf-color-inverse-surface));
  border-top: var(--sf-spacing-8) solid transparent;
}
.sf-tooltip-arrow-inner-bottom,
.sf-tooltip-arrow-inner-top {
  right: var(--sf-spacing-16);
}
.sf-tooltip-arrow-inner-right,
.sf-tooltip-arrow-inner-left {
  bottom: var(--sf-spacing-16);
}
.sf-tooltip-close {
  background-color: rgb(var(--sf-color-inverse-surface));
  border-radius: var(--sf-radius-full);
  border: 1px solid rgb(var(--sf-color-inverse-on-surface));
  color: rgb(var(--sf-color-inverse-on-surface));
}
.sf-tooltip-close:hover {
  background-color: rgb(var(--sf-color-inverse-on-surface));
  color: rgb(var(--sf-color-inverse-surface));
}
.sf-tooltip-content {
  border-radius: inherit;
  color: rgb(var(--sf-color-inverse-on-surface));
  font-size: var(--sf-font-size-xs);
  line-height: var(--sf-line-height-xs);
}