// ---
// title: Poptip
// description: Information bubbles on hover.
// ---

// <div class="example html">
//   <button v-poptip data-dir="top-left" data-content="This is a pop-tip. Use only limited text." class="lego-button">
//       Hover Me
//   </button>
// </div>

// <div class="example html">
//   <button v-poptip data-dir="top-center" data-content="This is a pop-tip. Use only limited text." class="lego-button">
//       Hover Me
//   </button>
// </div>

// <div class="example html">
//   <button v-poptip data-dir="top-right" data-content="This is a pop-tip. Use only limited text." class="lego-button">
//       Hover Me
//   </button>
// </div>

// <div class="example html">
//   <button v-poptip data-dir="bottom-left" data-content="This is a pop-tip. Use only limited text." class="lego-button">
//       Hover Me
//   </button>
// </div>

// <div class="example html">
//   <button v-poptip data-dir="bottom-center" data-content="This is a pop-tip. Use only limited text." class="lego-button">
//       Hover Me
//   </button>
// </div>

// <div class="example html">
//   <button v-poptip data-dir="bottom-right" data-content="This is a pop-tip. Use only limited text." class="lego-button">
//       Hover Me
//   </button>
// </div>

// <div class="example html">
//   <button v-poptip data-dir="right" data-content="This is a pop-tip. Use only limited text." class="lego-button">
//       Hover Me
//   </button>
// </div>

// <div class="example html">
//   <button v-poptip data-dir="left" data-content="This is a pop-tip. Use only limited text." class="lego-button">
//       Hover Me
//   </button>
// </div>

// <div class="example html">
//   <button v-poptip data-dir="top" data-content="This is a pop-tip. Use only limited text." class="lego-button">
//       Hover Me
//   </button>
// </div>

// <div class="example html">
//   <button v-poptip data-dir="bottom" data-content="This is a pop-tip. Use only limited text." class="lego-button">
//       Hover Me
//   </button>
// </div>

// [---]

.#{$namespace}pop-tip {
  background: map-fetch($color, ui dark);
  color: map-fetch($color, text white);
  border-radius: map-fetch($border-radius, base);
  font-size: map-fetch($font, size micro);
  padding: spacer(0.5) spacer(1);
  max-width: map-fetch($pop-tip, max-width);
  display: inline-block;
  z-index: map-fetch($z-index, poptip);

  // Arrow options.

  &--arrow-top-center {
    @include arrow(top, center, map-fetch($color, ui dark));
  }

  &--arrow-top-left {
    @include arrow(top, left, map-fetch($color, ui dark));
  }

  &--arrow-top-right {
    @include arrow(top, right, map-fetch($color, ui dark));
  }

  &--arrow-bottom-center {
    @include arrow(bottom, center, map-fetch($color, ui dark));
  }

  &--arrow-bottom-left {
    @include arrow(bottom, left, map-fetch($color, ui dark));
  }

  &--arrow-bottom-right {
    @include arrow(bottom, right, map-fetch($color, ui dark));
  }

  &--arrow-left {
    @include arrow(left, center, map-fetch($color, ui dark));
  }

  &--arrow-right {
    @include arrow(right, center, map-fetch($color, ui dark));
  }
}