@zohodesk/components/es/Tooltip/Tooltip.module.css

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

.tooltiptext {
  position: fixed;
  z-index: 9999999;
  /*Hook for editor alert*/
  pointer-events: none;
  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
  border-radius: var(--zd_size4);
}[dir=ltr] .tooltiptext {
  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
}[dir=rtl] .tooltiptext {
  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.tooltipcont {
  color: var(--zdt_tooltip_default_text);
  font-size: var(--zd_font_size13) ;
  font-family: var(--zd_semibold);
  word-break: break-word;
  max-width: var(--zd_size420) ;
  line-height: 1.5385;
  min-height: var(--zd_size24) ;
  overflow: hidden;
  background-color: var(--zdt_tooltip_default_bg);
  padding: 0 var(--zd_size10) ;
  border-style: solid;
  border-color: transparent;
  border-radius: var(--zd_size4);
}
.tooltiparrow {
  content: '';
  position: absolute;
  top: 0 ;
  border-top-left-radius: 3px;
}

.arrowUp,
.arrowDown {
  /*  Variable:Ignore  */
  width: 11px;
  /*  Variable:Ignore  */
  height: 11px;
  border-top: solid 6px var(--zdt_tooltip_default_bg);
  border-left: solid 6px var(--zdt_tooltip_default_bg);
  border-right: solid 6px transparent;
  border-bottom: solid 6px transparent;
  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
  z-index: -1;
}

.arrowDown {
  /*  Variable:Ignore  */
  margin-top: -4px !important;
  /* put important because of '.wms-mainui *' have margin: 0; */
}

.arrowLeft,
.arrowRight {
  /*  Variable:Ignore  */
  width: 11px;
  /*  Variable:Ignore  */
  height: 11px;
  border-top: solid 6px var(--zdt_tooltip_default_bg);
  border-left: solid 6px var(--zdt_tooltip_default_bg);
  border-right: solid 6px transparent;
  border-bottom: solid 6px transparent;
  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
  z-index: -1;
}

.arrowRight {
  /*  Variable:Ignore  */
  margin-left: -2px;
}

.arrowLeft {
  /*  Variable:Ignore  */
  margin-left: 1px;
}

.arrowUp {
  transform: rotate(45deg);
}

.arrowDown {
  transform: rotate(225deg);
}

.arrowLeft {
  transform: rotate(315deg) translateY(-50%);
}

.arrowRight {
  transform: rotate(135deg) translateY(50%);
}
@keyframes tooltip-grow {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes tooltip-grow {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-moz-keyframes tooltip-grow {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-ms-keyframes tooltip-grow {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}