#tooltip-container {
  position: fixed;
  width: 0;
  height: 0;
}
.tooltip {
  width: 100vw;
  box-shadow: 0px 0px 0px rgba(30, 30, 30, .5);
  border-radius: .4rem;
  border: 1px solid #000;
  max-width: 10rem;
  background-color: #000;
  padding: .5rem .4rem;
  width: -moz-max-content !important;
  width: max-content !important;
}
.tooltip .tooltip-container {
    position: relative;
    height: 100%;
  }
.tooltip .tooltip-container .title {
      color: #fff;
      font-size: .9rem;
      line-height: .8rem;
    }
.tooltip .tooltip-container .description {
      color: #fff;
      font-size: .8rem;
    }
.tooltip .tooltip-container::after {
     content:'';
     position: absolute;
     top: 100%;
     left: 50%;
     margin-left: -8px;
     margin-top: 8px;
     width: 0;
     height: 0;
     border-top: solid 8px #000;
     border-left: solid 8px transparent;
     border-right: solid 8px transparent;
    }
.tooltip[data-placement="bottom"] .tooltip-container::after {
         top: auto;
         bottom: 100%;
         transform: rotate(180deg) translateY(9px)
      }
.tooltip[data-placement="right"] .tooltip-container::after {
       top: 50%;
       left: 0;
       bottom: 100%;
       transform: rotate(90deg) translate(-10px, 9px);
      }
.tooltip[data-placement="left"] .tooltip-container::after {
       top: auto;
       left: auto;
       right: -9px;
       bottom: 100%;
       transform: rotate(-90deg) translate(-10px, 9px);
      }
.tooltip[data-type="light"] {
    border: 1px solid #fff;
    background-color: #fff;
  }
.tooltip[data-type="light"] .tooltip-container .title {
        color: #000;
      }
.tooltip[data-type="light"] .tooltip-container .description {
        color: #000;
      }
.tooltip[data-type="light"] .tooltip-container::after {
        border-color: #fff;
      }
.tooltip[data-size="medium"] {
    max-width: 15rem;
    padding: .7rem .6rem;
  }
.tooltip[data-size="medium"] .tooltip-container .title {
        font-size: 1rem;
        line-height: .9rem;
      }
.tooltip[data-size="medium"] .tooltip-container .description {
        color: #fff;
        font-size: .8rem;
      }
.tooltip[data-size="medium"] .tooltip-container::after {
        margin-top: 12px;
      }
.tooltip[data-size="large"] {
    max-width: 15rem;
    padding: .7rem .6rem;
  }
.tooltip[data-size="large"] .tooltip-container .title {
        font-size: 1.2rem;
        line-height: 1rem;
      }
.tooltip[data-size="large"] .tooltip-container .description {
        color: #fff;
        font-size: 1rem;
      }
.tooltip[data-size="large"] .tooltip-container::after {
        margin-top: 12px;
      }