.custom-tooltip
  position: relative
  a
    z-index: 95
  .tooltip-content
    min-width: +emCalc(200px)
    -webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50)
    -moz-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50)
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50)
    z-index: 96
    position: absolute
    margin-top: +emCalc(10px)
    margin-left: +emCalc(-50px)
    background: white
    border: 1px solid $border-color
    padding: +emCalc(20px)

    &:before
      content: ' '
      width: 0
      height: 0
      line-height: 0
      top: +emCalc(-10px)
      left: +emCalc(43px)
      position: absolute
      border-bottom: +emCalc(20px) solid white
      border-right: (+emCalc(20px)*.75) solid transparent
      border-left: (+emCalc(20px)*.75) solid transparent

.custom-tooltip
  position: relative
  a
    z-index: 95
  .tooltip-content
    min-width: +emCalc(200px)
    -webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50)
    -moz-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50)
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50)
    z-index: 96
    position: absolute
    margin-top: +emCalc(10px)
    margin-left: +emCalc(-50px)
    background: white
    border: 1px solid $border-color
    padding: +emCalc(20px)

    &:before
      content: ' '
      width: 0
      height: 0
      line-height: 0
      top: +emCalc(-10px)
      left: +emCalc(43px)
      position: absolute
      border-bottom: +emCalc(20px) solid white
      border-right: (+emCalc(20px)*.75) solid transparent
      border-left: (+emCalc(20px)*.75) solid transparent

.tooltip
  -webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50)
  -moz-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50)
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50)
  background: white
  border: 1px solid $border-color
  color: $body-font-color
  font-weight: normal
  > .nub
    border-bottom-color: white

Add custom tooltip design to foundation tooltip
Add custom tooltip design to foundation tooltip
