dh-c/dist/tooltip/tooltip.css

The front-end development engineers jimberton gulp react component

.dh-tooltip {
  position: absolute;
  left: -9999px;
  top: -9999px;
  z-index: 1050;
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5; }
  .dh-tooltip-arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid rgba(31, 56, 88, 0.2);
    background-color: #fff;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    box-shadow: 0 1px 4px 0 rgba(31, 56, 88, 0.15); }
  .dh-tooltip-content {
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    box-shadow: 0 1px 4px 0 rgba(31, 56, 88, 0.15); }
  .dh-tooltip-hidden {
    display: none; }
  .dh-tooltip-inner {
    position: relative;
    z-index: 2;
    padding: 6px 16px;
    color: #666666;
    text-align: center;
    color: rgba(31, 56, 88, 0.8);
    text-decoration: none;
    border-radius: 3px;
    background-color: #fff; }
  .dh-tooltip-placement-left, .dh-tooltip-placement-leftBottom, .dh-tooltip-placement-leftTop {
    margin-left: -3px;
    padding: 0 6px; }
    .dh-tooltip-placement-left .dh-tooltip-arrow, .dh-tooltip-placement-leftBottom .dh-tooltip-arrow, .dh-tooltip-placement-leftTop .dh-tooltip-arrow {
      right: 2px; }
  .dh-tooltip-placement-leftTop .dh-tooltip-arrow {
    top: 8px; }
  .dh-tooltip-placement-left .dh-tooltip-arrow {
    top: 50%;
    margin-top: -4px; }
  .dh-tooltip-placement-leftBottom .dh-tooltip-arrow {
    bottom: 8px; }
  .dh-tooltip-placement-right, .dh-tooltip-placement-rightBottom, .dh-tooltip-placement-rightTop {
    margin-left: 3px;
    padding: 0 6px; }
    .dh-tooltip-placement-right .dh-tooltip-arrow, .dh-tooltip-placement-rightBottom .dh-tooltip-arrow, .dh-tooltip-placement-rightTop .dh-tooltip-arrow {
      left: 2px; }
  .dh-tooltip-placement-rightTop .dh-tooltip-arrow {
    top: 8px; }
  .dh-tooltip-placement-right .dh-tooltip-arrow {
    top: 50%;
    margin-top: -4px; }
  .dh-tooltip-placement-rightBottom .dh-tooltip-arrow {
    bottom: 8px; }
  .dh-tooltip-placement-top, .dh-tooltip-placement-topLeft, .dh-tooltip-placement-topRight {
    margin-top: -3px;
    padding: 6px 0; }
    .dh-tooltip-placement-top .dh-tooltip-arrow, .dh-tooltip-placement-topLeft .dh-tooltip-arrow, .dh-tooltip-placement-topRight .dh-tooltip-arrow {
      bottom: 2px; }
  .dh-tooltip-placement-top .dh-tooltip-arrow {
    left: 50%;
    margin-left: -6px; }
  .dh-tooltip-placement-topLeft .dh-tooltip-arrow {
    left: 12px; }
  .dh-tooltip-placement-topRight .dh-tooltip-arrow {
    right: 12px; }
  .dh-tooltip-placement-bottom, .dh-tooltip-placement-bottomLeft, .dh-tooltip-placement-bottomRight {
    margin-top: 3px;
    padding: 6px 0; }
    .dh-tooltip-placement-bottom .dh-tooltip-arrow, .dh-tooltip-placement-bottomLeft .dh-tooltip-arrow, .dh-tooltip-placement-bottomRight .dh-tooltip-arrow {
      top: 2px; }
  .dh-tooltip-placement-bottomLeft .dh-tooltip-arrow {
    left: 12px; }
  .dh-tooltip-placement-bottom .dh-tooltip-arrow {
    left: 50%;
    margin-left: -6px; }
  .dh-tooltip-placement-bottomRight .dh-tooltip-arrow {
    right: 12px; }