bee-tooltip/build/Tooltip.css

bee-tooltip ui component for react

/* FormGroup */
/*  Navlayout  */
.u-tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-break: auto;
  line-height: 1.42857143;
  text-align: left;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  font-size: 12px;
  opacity: 0;
  max-width: 200px; }
  .u-tooltip.in {
    opacity: 1 !important; }
  .u-tooltip .tooltip-arrow {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid; }
  .u-tooltip .tooltip-inner {
    padding: 3px 8px;
    color: #fff;
    background-color: #42526E;
    border-radius: 3px;
    word-wrap: break-word; }
  .u-tooltip.top, .u-tooltip.topLeft, .u-tooltip.topRight {
    padding: 5px 0; }
  .u-tooltip.right, .u-tooltip.rightTop, .u-tooltip.rightBottom {
    padding: 0 5px; }
  .u-tooltip.bottom, .u-tooltip.bottomLeft, .u-tooltip.bottomRight {
    padding: 5px 0; }
  .u-tooltip.left, .u-tooltip.leftTop, .u-tooltip.leftBottom {
    padding: 0 5px; }
  .u-tooltip::-webkit-scrollbar {
    width: 5px; }
  .u-tooltip::-webkit-scrollbar-track {
    display: none; }
  .u-tooltip::-webkit-scrollbar-thumb {
    background-color: #CDD9E6; }
  .u-tooltip::-webkit-scrollbar-button {
    background-color: #fff; }
  .u-tooltip::-webkit-scrollbar-corner {
    display: none; }
  .u-tooltip::-webkit-scrollbar-track-piece {
    display: none; }
  .u-tooltip.top .tooltip-arrow,
  .u-tooltip.topLeft .tooltip-arrow,
  .u-tooltip.topRight .tooltip-arrow {
    bottom: 0px;
    border-width: 5px 5px 0;
    border-top-color: #42526E; }
  .u-tooltip.top .tooltip-arrow {
    left: 50%;
    margin-left: -5px; }
  .u-tooltip.topLeft .tooltip-arrow {
    left: 16px; }
  .u-tooltip.topRight .tooltip-arrow {
    right: 16px; }
  .u-tooltip.right .tooltip-arrow,
  .u-tooltip.rightTop .tooltip-arrow,
  .u-tooltip.rightBottom .tooltip-arrow {
    left: 0px;
    border-width: 5px 5px 5px 0;
    border-right-color: #42526E; }
  .u-tooltip.right .tooltip-arrow {
    top: 50%;
    margin-top: -5px; }
  .u-tooltip.rightTop .tooltip-arrow {
    top: 8px; }
  .u-tooltip.rightBottom .tooltip-arrow {
    bottom: 8px; }
  .u-tooltip.left .tooltip-arrow,
  .u-tooltip.leftTop .tooltip-arrow,
  .u-tooltip.leftBottom .tooltip-arrow {
    right: 0px;
    border-width: 5px 0 5px 5px;
    border-left-color: #42526E; }
  .u-tooltip.left .tooltip-arrow {
    top: 50%;
    margin-top: -5px; }
  .u-tooltip.leftTop .tooltip-arrow {
    top: 8px; }
  .u-tooltip.leftBottom .tooltip-arrow {
    bottom: 8px; }
  .u-tooltip.bottom .tooltip-arrow,
  .u-tooltip.bottomLeft .tooltip-arrow,
  .u-tooltip.bottomRight .tooltip-arrow {
    top: 0px;
    border-width: 0 5px 5px;
    border-bottom-color: #42526E; }
  .u-tooltip.bottom .tooltip-arrow {
    left: 50%;
    margin-left: -5px; }
  .u-tooltip.bottomLeft .tooltip-arrow {
    left: 16px; }
  .u-tooltip.bottomRight .tooltip-arrow {
    right: 16px; }
  .u-tooltip.inverse-arrow.right, .u-tooltip.inverse-arrow.rightTop, .u-tooltip.inverse-arrow.rightBottom {
    margin-right: -6px; }
    .u-tooltip.inverse-arrow.right .tooltip-arrow, .u-tooltip.inverse-arrow.rightTop .tooltip-arrow, .u-tooltip.inverse-arrow.rightBottom .tooltip-arrow {
      left: auto;
      right: 0;
      border-width: 5px 0 5px 5px;
      border-left-color: #42526E; }
  .u-tooltip.inverse-arrow.left, .u-tooltip.inverse-arrow.leftTop, .u-tooltip.inverse-arrow.leftBottom {
    margin-left: -6px; }
    .u-tooltip.inverse-arrow.left .tooltip-arrow, .u-tooltip.inverse-arrow.leftTop .tooltip-arrow, .u-tooltip.inverse-arrow.leftBottom .tooltip-arrow {
      left: 0;
      border-width: 5px 5px 5px 0;
      border-right-color: #42526E; }
  .u-tooltip.inverse-arrow.top, .u-tooltip.inverse-arrow.topLeft, .u-tooltip.inverse-arrow.topRight {
    margin-top: -6px; }
    .u-tooltip.inverse-arrow.top .tooltip-arrow, .u-tooltip.inverse-arrow.topLeft .tooltip-arrow, .u-tooltip.inverse-arrow.topRight .tooltip-arrow {
      top: 0;
      border-width: 0 5px 5px;
      border-bottom-color: #42526E; }
  .u-tooltip.inverse-arrow.bottom {
    margin-bottom: -6px; }
    .u-tooltip.inverse-arrow.bottom .tooltip-arrow {
      top: auto;
      bottom: 0;
      border-width: 5px 5px 0;
      border-top-color: #42526E; }
  .u-tooltip.inverse.bottom .tooltip-arrow::after, .u-tooltip.inverse.bottomLeft .tooltip-arrow::after, .u-tooltip.inverse.bottomRight .tooltip-arrow::after {
    top: 1px;
    margin-left: -5px;
    border-top-width: 0;
    border-bottom-color: #fff; }
  .u-tooltip.inverse.bottom .tooltip-arrow, .u-tooltip.inverse.bottomLeft .tooltip-arrow, .u-tooltip.inverse.bottomRight .tooltip-arrow {
    border-bottom-color: rgb(165, 173, 186); }
  .u-tooltip.inverse-arrow.inverse.top .tooltip-arrow::after, .u-tooltip.inverse-arrow.inverse.topLeft .tooltip-arrow::after, .u-tooltip.inverse-arrow.inverse.topRight .tooltip-arrow::after {
    top: 1px;
    margin-left: -5px;
    border-top-width: 0;
    border-bottom-color: #fff;
    border-bottom-width: inherit; }
  .u-tooltip.inverse-arrow.inverse.top .tooltip-arrow, .u-tooltip.inverse-arrow.inverse.topLeft .tooltip-arrow, .u-tooltip.inverse-arrow.inverse.topRight .tooltip-arrow {
    border-bottom-color: rgb(165, 173, 186); }
  .u-tooltip.inverse.left .tooltip-arrow::after, .u-tooltip.inverse.leftTop .tooltip-arrow::after, .u-tooltip.inverse.leftBottom .tooltip-arrow::after {
    border-right-width: 0;
    top: -5px;
    margin-left: -6px;
    border-left-color: #fff; }
  .u-tooltip.inverse.left .tooltip-arrow, .u-tooltip.inverse.leftTop .tooltip-arrow, .u-tooltip.inverse.leftBottom .tooltip-arrow {
    border-left-color: rgb(165, 173, 186); }
  .u-tooltip.inverse-arrow.inverse.right .tooltip-arrow::after, .u-tooltip.inverse-arrow.inverse.rightTop .tooltip-arrow::after, .u-tooltip.inverse-arrow.inverse.rightBottom .tooltip-arrow::after {
    border-right-width: 0;
    top: -5px;
    margin-left: -6px;
    border-left-color: #fff;
    border-left-width: inherit; }
  .u-tooltip.inverse-arrow.inverse.right .tooltip-arrow, .u-tooltip.inverse-arrow.inverse.rightTop .tooltip-arrow, .u-tooltip.inverse-arrow.inverse.rightBottom .tooltip-arrow {
    border-left-color: rgb(165, 173, 186); }
  .u-tooltip.inverse.right .tooltip-arrow::after, .u-tooltip.inverse.rightTop .tooltip-arrow::after, .u-tooltip.inverse.rightBottom .tooltip-arrow::after {
    border-left-width: 0;
    top: -5px;
    margin-left: 1px;
    border-right-color: #fff; }
  .u-tooltip.inverse.right .tooltip-arrow, .u-tooltip.inverse.rightTop .tooltip-arrow, .u-tooltip.inverse.rightBottom .tooltip-arrow {
    border-right-color: rgb(165, 173, 186); }
  .u-tooltip.inverse-arrow.inverse.left .tooltip-arrow::after, .u-tooltip.inverse-arrow.inverse.leftTop .tooltip-arrow::after, .u-tooltip.inverse-arrow.inverse.leftBottom .tooltip-arrow::after {
    border-left-width: 0;
    top: -5px;
    margin-left: 1px;
    border-right-color: #fff;
    border-right-width: inherit; }
  .u-tooltip.inverse-arrow.inverse.left .tooltip-arrow, .u-tooltip.inverse-arrow.inverse.leftTop .tooltip-arrow, .u-tooltip.inverse-arrow.inverse.leftBottom .tooltip-arrow {
    border-right-color: rgb(165, 173, 186); }
  .u-tooltip.inverse.top .tooltip-arrow::after, .u-tooltip.inverse.topLeft .tooltip-arrow::after, .u-tooltip.inverse.topRight .tooltip-arrow::after {
    top: -6px;
    margin-left: -5px;
    border-bottom-width: 0;
    border-bottom-color: #d9d9d9;
    border-top-color: #fff; }
  .u-tooltip.inverse.top .tooltip-arrow, .u-tooltip.inverse.topLeft .tooltip-arrow, .u-tooltip.inverse.topRight .tooltip-arrow {
    border-top-color: rgb(165, 173, 186); }
  .u-tooltip.inverse-arrow.inverse.bottom .tooltip-arrow::after, .u-tooltip.inverse-arrow.inverse.bottomLeft .tooltip-arrow::after, .u-tooltip.inverse-arrow.inverse.bottomRight .tooltip-arrow::after {
    top: -6px;
    margin-left: -5px;
    border-bottom-width: 0;
    border-bottom-color: #d9d9d9;
    border-top-color: #fff;
    border-top-width: inherit; }
  .u-tooltip.inverse-arrow.inverse.bottom .tooltip-arrow, .u-tooltip.inverse-arrow.inverse.bottomLeft .tooltip-arrow, .u-tooltip.inverse-arrow.inverse.bottomRight .tooltip-arrow {
    border-top-color: rgb(165, 173, 186); }
  .u-tooltip.inverse .tooltip-inner {
    background-color: #fff;
    color: #333333;
    border: 1px solid rgb(165, 173, 186); }
  .u-tooltip.inverse .tooltip-arrow::after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    content: " "; }