Demo

Hover over any of the bolded words.

Fermentum magna rhoncus inceptos tincidunt est urna luctus pretium consequat velit ipsum. Elementum rhoncus porta fames sociis Nulla rhoncus nascetur consequat litora neque magnis pulvinar. Ac nec consequat Morbi nulla Phasellus fames ultricies ullamcorper tortor posuere litora faucibus efficitur. Nunc lobortis velit erat vehicula facilisis Donec convallis odio auctor risus volutpat ultrices.

Eleifend semper sem ornare Aliquam tellus tristique consectetur dignissim odio pretium morbi per ad. Cras Phasellus metus vitae risus nulla ut sagittis Proin luctus cursus posuere placerat vehicula. Tortor viverra vitae magnis nisl venenatis habitant tristique Vestibulum ornare tortor mollis tellus. Rhoncus Duis molestie taciti habitant fermentum rutrum magna pharetra Class aliquam lorem pretium pharetra.

Installation

bower install tipsy.sass

Getting Started

Import tipsy.sass in your stylesheet

SCSS

@import "tipsy";

SASS

@import "tipsy"

tipsy has 6 optional parameters

  1. Tooltip & Arrow Position

    $gravity: nw | n | ne | e | se | s | sw | w

    • nw = northwest
    • n = north
    • ne = northeast
    • se = southeast
    • s = south
    • sw = southwest
    • w = west
  2. Tooltip Text Color

    $color: HEX | RGB | RGBA | HSL

  3. Tooltip Background Color

    $background: HEX | RGB | RGBA | HSL

  4. Tooltip Arrow Size

    $border-size: px | em | rem or any unit of length

  5. Tooltip Border Radius

    $border-radius: px | em | rem or any unit of length

  6. Tooltip Shadow

    $box-shadow: 0px,0px,0px rgba(0,0,0,0.2) same syntax as the box-shadow css property

How to use

HTML
<span data-tipsy="sample text that will be displayed in tooltip">foo bar</span>
SCSS

example one

  span {
    @include tipsy();
  }

example two

  span {
    @include tipsy(s, #FFF, #000, 5px, 3px);
  }

example three

  span {
    @include tipsy(s, #FFF, #000, 5px, 3px, 2px 2px 5px rgba(0, 0, 0, .50));
  }

SASS

example one

span
  @include tipsy()  

example two

span
  @include tipsy(s, #FFF, #000, 5px, 3px)

example three

span
  @include tipsy(s, #FFF, #000, 5px, 3px, 2px 2px 5px rgba(0, 0, 0, .50))

Contributing

Feel free to create issues, request features, or submit pull requests.