foundation/stylus/foundation/components/tooltips.styl

You may also want to checkout:

//
// Tooltip Variables
//
$include-html-tooltip-classes ?= $include-html-classes;

$has-tip-border-bottom ?= dotted 1px #ccc;
$has-tip-font-weight ?= bold;
$has-tip-font-color ?= #333;
$has-tip-border-bottom-hover ?= dotted 1px darken($primary-color, 20%);
$has-tip-font-color-hover ?= $primary-color;
$has-tip-cursor-type ?= help;

$tooltip-padding ?= emCalc(8px);
$tooltip-bg ?= #000;
$tooltip-font-size ?= emCalc(15px);
$tooltip-font-weight ?= bold;
$tooltip-font-color ?= #fff;
$tooltip-line-height ?= 1.3;
$tooltip-close-font-size ?= emCalc(10px);
$tooltip-close-font-weight ?= normal;
$tooltip-close-font-color ?= #888;
$tooltip-font-size-sml ?= emCalc(14px);
$tooltip-radius ?= $global-radius;
$tooltip-pip-size ?= 5px;

if $include-html-tooltip-classes != false {

  /* Tooltips */
  .has-tip {
    border-bottom: $has-tip-border-bottom;
    cursor: $has-tip-cursor-type;
    font-weight: $has-tip-font-weight;
    color: $has-tip-font-color;

    &:hover,
    &:focus {
      border-bottom: $has-tip-border-bottom-hover;
      color: $has-tip-font-color-hover;
    }

    &.tip-left,
    &.tip-right { float: none !important; }
  }

  .tooltip {
    display: none;
    position: absolute;
    z-index: 999;
    font-weight: $tooltip-font-weight;
    font-size: $tooltip-font-size;
    line-height: $tooltip-line-height;
    padding: $tooltip-padding;
    max-width: 85%;
    {$default-float}: 50%;
    width: 100%;
    color: $tooltip-font-color;
    background: $tooltip-bg;
    radius($tooltip-radius);

    &>.nub {
      display: block;
      {$default-float}: $tooltip-pip-size;
      position: absolute;
      width: 0;
      height: 0;
      border: solid $tooltip-pip-size;
      border-color: transparent transparent $tooltip-bg transparent;
      top: -($tooltip-pip-size * 2);
    }

    &.opened {
      color: $has-tip-font-color-hover !important;
      border-bottom: $has-tip-border-bottom-hover !important;
    }
  }

  .tap-to-close {
    display: block;
    font-size: $tooltip-close-font-size;
    color: $tooltip-close-font-color;
    font-weight: $tooltip-close-font-weight;
  }

  @media $small {
    .tooltip {
      &>.nub {
        border-color: transparent transparent $tooltip-bg transparent;
        top: -($tooltip-pip-size * 2);
      }
      &.tip-top>.nub {
        border-color: $tooltip-bg transparent transparent transparent;
        top: auto;
        bottom: -($tooltip-pip-size * 2);
      }

      &.tip-left,
      &.tip-right { float: none !important; }

      &.tip-left>.nub {
        border-color: transparent transparent transparent $tooltip-bg;
        right: -($tooltip-pip-size * 2);
        left: auto;
        top: 50%;
        margin-top: -($tooltip-pip-size);
      }
      &.tip-right>.nub {
        border-color: transparent $tooltip-bg transparent transparent;
        right: auto;
        left: -($tooltip-pip-size * 2);
        top: 50%;
        margin-top: -($tooltip-pip-size);
      }

    }
  }
  
}