Contents

.tooltip-item {
  $base-border-color: gainsboro !default;
  $base-border-radius: 3px !default;
  $base-line-height: 1.5em !default;
  $dark-gray: #333 !default;
  $base-font-color: $dark-gray !default;
  $tooltip-background: white;
  $tooltip-color: $base-font-color;
  $tooltip-max-width: 16em;
  $tooltip-arrow-width: 8px;
  $tooltip-shadow: 0 2px 2px silver;
  $tooltip-distance-from-item: 3em;
  $tooltip-arrow-distance-from-box: -1.3em;

  background: $tooltip-background;
  border: 1px solid $base-border-color;
  border-radius: $base-border-radius;
  display: inline-block;
  padding: 0.5em 1em;
  position: relative;
  text-align: center;

  &:focus,
  &:hover .tooltip {
    opacity: 1;
    visibility: visible;
  }

  .tooltip {
    @include position(absolute, null 0 $tooltip-distance-from-item 0);
    background-color: $tooltip-background;
    background: #fff;
    border-radius: $base-border-radius;
    box-shadow: $tooltip-shadow;
    color: $tooltip-color;
    font-size: 0.9em; // Make sure you use -webkit-backface-visibility: hidden; on the body element to prevent 1px nudging bugs.
    line-height: 1.5em;
    margin: 0 auto;
    max-width: $tooltip-max-width;
    opacity: 0;
    padding: 1em;
    text-align: center;
    transition: all 0.2s ease-in-out;
    visibility: hidden;
    z-index: 10;

    p {
      color: $base-font-color;
      line-height: $base-line-height;
      margin: 0;
    }

    &::after {
      @include position(absolute, null 0);
      border: $tooltip-arrow-width solid transparent;
      bottom: $tooltip-arrow-distance-from-box;
      color: $tooltip-background;
      content: "▼";
      font-size: 1.4em;
      margin-left: -$tooltip-arrow-width;
      text-align: center;
      text-shadow: $tooltip-shadow;
    }
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
refills-0.2.0	source/stylesheets/refills/_tooltip.scss