GitHub

## SPECTRE

Getting started

- Introduction
- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Accordions#

Accordions are used to toggle sections of content.

Elements

- Element 1
- Element 2

Layout

- Layout 1
- Layout 2

Components

- Component 1
- Component 2

Elements

- Element 1
- Element 2

Layout

- Layout 1
- Layout 2

Components

- Component 1
- Component 2

    <!-- standard Accordions example -->
    <div class="accordion">
      <input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden>
      <label class="accordion-header" for="accordion-1">
        <i class="icon icon-arrow-right mr-1"></i>
        Title
      </label>
      <div class="accordion-body">
        <!-- Accordions content -->
      </div>
    </div>

    <!-- mutually exclusive Accordions example (with same input names) -->
    <div class="accordion">
      <input type="radio" id="accordion-1" name="accordion-radio" hidden>
      <label class="accordion-header" for="accordion-1">
        Title
      </label>
      <div class="accordion-body">
        <!-- Accordions content -->
      </div>
    </div>

Alternatively, you can use `details` and `summary` instead of `input` radio or checkbox trick. Add the `open` attribute to `details` to expand it. Microsoft Edge support is under consideration.

    <!-- details and summary Accordions example -->
    <details class="accordion" open>
      <summary class="accordion-header">
        <i class="icon icon-arrow-right mr-1"></i>
        Title
      </summary>
      <div class="accordion-body">
        <!-- Accordions content -->
      </div>
    </details>

### Avatars#

Avatars are user profile pictures.

Add the `avatar` class to <img> element. There are 4 additional sizes available, including `avatar-xl`(64px), `avatar-lg`(48px), `avatar-sm`(24px), and `avatar-xs`(16px). By default, the avatar size is 32px.

For users who don't have profile pictures, you may use their initials for avatars. Add the `avatar` class and avatar size class to <div> element. The `data-initial` attribute is the name appear inside the avatar.

    <!-- Basic avatar examples -->
    <figure class="avatar avatar-xl">
      <img src="img/avatar-1.png" alt="...">
    </figure>

    <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>

    <!-- Show initals when avatar image is unavailable or not fully loaded -->
    <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
      <img src="img/avatar-1.png" alt="...">
    </figure>

    <figure class="avatar avatar-xl">
      <img src="img/avatar-1.png" alt="...">
      <img src="img/avatar-5.png" class="avatar-icon" alt="...">
    </figure>

#### Avatar presence#

Avatars support presence indicators. You can add an <i> element with the `avatar-presence` class, and add `online`, `busy` or `away` class for different status colors. The default is gray which means offline.

    <figure class="avatar avatar-xl">
      <img src="img/avatar-1.png" alt="...">
      <i class="avatar-presence online"></i>
    </figure>

### Badges#

Badges are often used as unread number indicators.

Notifications
Notifications
Notifications
Notifications

Add the `badge` class to non self closing elements. And add the `data-badge` attribute to define the content of a badge. The badge will appear in the top-right direction of the element.

If there is no `data-badge` or the attribute is not specified, the badge will appear as a dot.

Badges support `button` and `avatars` elements as well.

    <span class="badge">
      Notifications
    </span>

    <span class="badge" data-badge="8">
      Notifications
    </span>

    <button class="btn badge" data-badge="8">
      Button
    </button>

    <figure class="avatar badge" data-badge="8" data-initial="YZ">
      <img src="img/avatar-3.png" alt="YZ">
    </figure>

### Bars#

Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <progress>, <meter> and input range elements.

25%
15%
10%
15%

Add a container element with the `bar` class. And add child elements with the `bar-item` class. The width percentage value is needed for every `bar-item`.

There is the `bar-sm` class for thinner Bars. Also, you could use Tooltips for any `bar-item`.

    <!-- normal bars -->
    <div class="bar bar-sm">
      <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <!-- multi-bars -->
    <div class="bar">
      <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
      <div class="bar-item" style="width:15%;background:#818bd5;">15%</div>
    </div>

#### Slider bars#

You can add the `bar-slider` class to the Bars container. And add child elements with the `bar-item` class and `bar-slider-btn` inside bar-item. You need to set the `bar-item` width manually to have the slider point.

If there are two `bar-item` divs in one bar-slider, you will have a range slider.

    <!-- normal slider -->
    <div class="bar bar-slider">
      <div class="bar-item" role="progressbar" style="width:25%;">
        <button class="bar-slider-btn btn" role="slider"></button>
      </div>
    </div>

    <!-- range slider -->
    <div class="bar bar-slider">
      <div class="bar-item" role="progressbar" style="width:15%;">
        <button class="bar-slider-btn btn" role="slider"></button>
      </div>
      <div class="bar-item" role="progressbar" style="width:65%;">
        <button class="bar-slider-btn btn" role="slider"></button>
      </div>
    </div>

### Breadcrumbs#

Breadcrumbs are used as navigational hierarchies to indicate current location.

- Home
- Settings

- Home
- Settings
- Change avatar

- Home
- Settings
- Search result:Spectre

Add a container element with the `breadcrumb` class. And add child elements with the `breadcrumb-item` class.

    <ul class="breadcrumb">
      <li class="breadcrumb-item">
        <a href="#">Home</a>
      </li>
      <li class="breadcrumb-item">
        <a href="#">Settings</a>
      </li>
      <li class="breadcrumb-item">
        <a href="#">Change avatar</a>
      </li>
    </ul>

### Cards#

Cards are flexible content containers.

Microsoft
Software and hardware
Empower every person and every organization on the planet to achieve more.
Do
Apple
Hardware and software
To make a contribution to the world by making tools for the mind that advance humankind.
Google I/O
Software and hardware
An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
Buy Share
Surface Studio. Turn your desk into a Studio. Surface Studio is designed for the creative process.
Apple
Hardware and software
To make a contribution to the world by making tools for the mind that advance humankind.
Google
Software and hardware
Organize the world’s information and make it universally accessible and useful.
Search Share

Add a container element with the `card` class. And add child elements with the `card-image`, `card-header`, `card-body` and/or `card-footer` classes. The `card-image` can be placed in any position.

    <div class="card">
      <div class="card-image">
        <img src="img/osx-el-capitan.jpg" class="img-responsive">
      </div>
      <div class="card-header">
        <div class="card-title h5">...</div>
        <div class="card-subtitle text-gray">...</div>
      </div>
      <div class="card-body">
        ...
      </div>
      <div class="card-footer">
        <button class="btn btn-primary">...</button>
      </div>
    </div>

### Chips#

Chips are complex entities in small blocks.

Crime Drama Biography Mystery
Tony Stark
Thor Odinson
Steve Rogers

Add a container element with the `chip` class. And add child text element, buttons or avatars with the `avatar` class.

    <span class="chip">Crime</span>

    <span class="chip">
      Biography
      <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
    </span>

    <div class="chip">
      <img src="img/avatar-1.png" class="avatar avatar-sm">
      Yan Zhu
      <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
    </div>

### Empty states#

Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.

You have no new messages

Click the button to start a conversation

You've successfully signed up

Click the button to invite your friends

You are not following anyone

Start to meet new friends

An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add `empty-icon`, `empty-title`, `empty-subtitle` or `empty-action` to the elements. HTML structure is exampled below.

    <div class="empty">
      <div class="empty-icon">
        <i class="icon icon-people"></i>
      </div>
      <p class="empty-title h5">You have no new messages</p>
      <p class="empty-subtitle">Click the button to start a conversation.</p>
      <div class="empty-action">
        <button class="btn btn-primary">Send a message</button>
      </div>
    </div>

### Menu#

Menus are vertical list of links or buttons for actions and navigation.

- Steve Rogers
- 2
  My profile
- Settings
- Logout

- Slack
- Hipchat
- Skype

- form-checkbox
- form-radio
- form-switch

Add a container element with the `menu` class. And add child elements with the `menu-item` class. You can separate menu items with a `divider`. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.

Menus also have Form controls (checkbox, radio and checkbox) support.

    <ul class="menu">
      <!-- menu header text -->
      <li class="divider" data-content="LINKS">
      </li>
      <!-- menu item standard -->
      <li class="menu-item">
        <a href="#">
          <i class="icon icon-link"></i> Slack
        </a>
      </li>
      <!-- menu item with form control -->
      <li class="menu-item">
        <label class="form-checkbox">
          <input type="checkbox">
          <i class="form-icon"></i> form-checkbox
        </label>
      </li>
      <!-- menu divider -->
      <li class="divider"></li>
      <!-- menu item with badge -->
      <li class="menu-item">
        <div class="menu-badge">
          <label class="label label-primary">2</label>
        </div>
        <a href="#">
          <i class="icon icon-link"></i> Settings
        </a>
      </li>
    </ul>

#### Dropdown menu#

The dropdown is a combination of buttons and menus.

dropdown button

- Slack
- Hipchat
- Skype

dropdown button

- Slack
- Hipchat
- Skype

Dropdown menus component is built entirely in CSS. It is triggered by `:focus` event.

Add a container element with the `dropdown` class. And add a focusable element with the `dropdown-toggle` class for the button and a `menu` component right next to it. You also need to add `tabindex` to make the buttons focusable.

If the dropdown is close to the right edge of the browser, you can add the `dropdown-right` class to the container to prevent it appearing off screen.

dropdown button

- Slack
- Hipchat
- Skype

Also, you can implement your JS to interact with the dropdown menus by adding the `active` class to the `dropdown` container.

    <!-- basic dropdown button -->
    <div class="dropdown">
      <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
        dropdown menu <i class="icon icon-caret"></i>
      </a>
      <!-- menu component -->
      <ul class="menu">
        ...
      </ul>
    </div>

    <!-- dropdown button group -->
    <div class="dropdown">
      <div class="btn-group">
        <a href="#" class="btn">
          dropdown button
        </a>
        <a href="#" class="btn dropdown-toggle" tabindex="0">
          <i class="icon icon-caret"></i>
        </a>

        <!-- menu component -->
        <ul class="menu">
          ...
        </ul>
      </div>
    </div>

### Modals#

Modals are flexible dialog prompts.

Open Modal
Modal title

This is the content inside the modal.

#### Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

#### Cupcake ipsum

Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.

De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.

#### Candy ipsum

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.

Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.

Close

Add a container element with the `modal` class. And add a real container `modal-container` and overlay `modal-overlay` inside it. You can add child elements with the `modal-header`, `modal-body` and `modal-footer` - any or all of them.

Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the `active` class to the `modal` container.

    <div class="modal active" id="modal-id">
      <a href="#close" class="modal-overlay" aria-label="Close"></a>
      <div class="modal-container">
        <div class="modal-header">
          <a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
          <div class="modal-title h5">Modal title</div>
        </div>
        <div class="modal-body">
          <div class="content">
            <!-- content here -->
          </div>
        </div>
        <div class="modal-footer">
          ...
        </div>
      </div>
    </div>

#### Modal sizes#

Open small size Modal
Modal title
Name
Gender Male Female
Close

Use the `modal-sm` class for a smaller modal dialog. The container max width is `320px`.

Open large size Modal
Modal title

This is the content inside the modal.

#### Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

#### Cupcake ipsum

Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.

De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.

#### Candy ipsum

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.

Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.

Close

Use the `modal-lg` class for a full size modal. The container max width is `960px`.

    <div class="modal modal-sm">
      <a href="#close" class="modal-overlay" aria-label="Close"></a>
      <div class="modal-container">
        <!-- modal structure here -->
      </div>
    </div>

### Nav#

- Elements
- Layout
  - Flexbox grid
  - Responsive
  - Navbar
  - Empty states
- Components
- Utilities

Add a container element with the `nav` class. And add child elements with the `nav-item` class. The `nav-item` with the `active` class will be highlighted.

    <ul class="nav">
      <li class="nav-item">
        <a href="#">Elements</a>
      </li>
      <li class="nav-item active">
        <a href="#">Layout</a>
        <ul class="nav">
          <li class="nav-item">
            <a href="#">Flexbox grid</a>
          </li>
          <li class="nav-item">
            <a href="#">Responsive</a>
          </li>
          <li class="nav-item">
            <a href="#">Navbar</a>
          </li>
          <li class="nav-item">
            <a href="#">Empty states</a>
          </li>
        </ul>
      </li>
      <li class="nav-item">
        <a href="#">Components</a>
      </li>
      <li class="nav-item">
        <a href="#">Utilities</a>
      </li>
    </ul>

### Pagination#

- Prev
- 1
- ...
- 4
- 5
- 6
- ...
- 9
- Next

- Prev
- 1
- 2
- 3
- ...
- 9
- Next

Add a container element with the `pagination` class. And add child elements with the `page-item` class. The `page-item` with the `active` class will be highlighted. You can add the `disabled` class to the `page-item` to have unclickable page links.

    <ul class="pagination">
      <li class="page-item disabled">
        <a href="#" tabindex="-1">Previous</a>
      </li>
      <li class="page-item active">
        <a href="#">1</a>
      </li>
      <li class="page-item">
        <a href="#">2</a>
      </li>
      <li class="page-item">
        <a href="#">3</a>
      </li>
      <li class="page-item">
        <span>...</span>
      </li>
      <li class="page-item">
        <a href="#">12</a>
      </li>
      <li class="page-item">
        <a href="#">Next</a>
      </li>
    </ul>

- Previous
  Getting started
- Next
  Layout

You could use previous and next pagination to navigate.

    <ul class="pagination">
      <li class="page-item page-prev">
        <a href="#">
          <div class="page-item-subtitle">Previous</div>
          <div class="page-item-title h5">Getting started</div>
        </a>
      </li>
      <li class="page-item page-next">
        <a href="#">
          <div class="page-item-subtitle">Next</div>
          <div class="page-item-title h5">Layout</div>
        </a>
      </li>
    </ul>

### Panels#

Panels are flexible view container with auto-expand content section.

Bruce Banner
THE HULK
E-mail
bruce.banner@hulk.com
Skype
bruce.banner
Location
Dayton, Ohio
Comments

Thor Odinson

Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

Bruce Banner

The Strategic Homeland Intervention, Enforcement, and Logistics Division...

Tony Stark

Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

Steve Rogers

The Strategic Homeland Intervention, Enforcement, and Logistics Division...

Natasha Romanoff

Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

Add a container element with the `panel` class. And add child elements with the `panel-header`, `panel-nav`, `panel-body` and/or `panel-footer` classes. The `panel-body` can be auto expanded and vertically scrollable.

    <div class="panel">
      <div class="panel-header">
        <div class="panel-title">Comments</div>
      </div>
      <div class="panel-nav">
        <!-- navigation components: tabs, breadcrumbs or pagination -->
      </div>
      <div class="panel-body">
        <!-- contents -->
      </div>
      <div class="panel-footer">
        <!-- buttons or inputs -->
      </div>
    </div>

### Popovers#

Popovers are small overlay content containers. Popovers component is built entirely in CSS.

top popover
Apple
Software and hardware
To make a contribution to the world by making tools for the mind that advance humankind.
right popover
Apple
Software and hardware
To make a contribution to the world by making tools for the mind that advance humankind.
bottom popover
Apple
Software and hardware
To make a contribution to the world by making tools for the mind that advance humankind.
left popover
Apple
Software and hardware
To make a contribution to the world by making tools for the mind that advance humankind.

Wrap an element by a container with the `popover` class. And add a container with the `popover-container` next to the element. You can use Cards component inside the `popover-container`.

Also, you can add the `popover-right`, `popover-bottom` or `popover-left` class to define the position. By default, the popovers appear above the element.

    <div class="popover popover-right">
      <button class="btn btn-primary">right popover</button>
      <div class="popover-container">
        <div class="card">
          <div class="card-header">
            ...
          </div>
          <div class="card-body">
            ...
          </div>
          <div class="card-footer">
            ...
          </div>
        </div>
      </div>
    </div>

### Steps#

Steps are progress indicators of a sequence of task steps.

- Step 1
- Step 2
- Step 3
- Step 4

Add a container element with the `step` class. And add child elements with the `step-item` class. The `step-item` with the `active` class will be highlighted and indicate the current state of progress.

    <ul class="step">
      <li class="step-item">
        <a href="#" class="tooltip" data-tooltip="Step 1">Step 1</a>
      </li>
      <li class="step-item active">
        <a href="#" class="tooltip" data-tooltip="Step 2">Step 2</a>
      </li>
      <li class="step-item">
        <a href="#" class="tooltip" data-tooltip="Step 3">Step 3</a>
      </li>
      <li class="step-item">
        <a href="#" class="tooltip" data-tooltip="Step 4">Step 4</a>
      </li>
    </ul>

### Tabs#

Tabs enable quick switch between different views.

- Music
- Playlists
- Radio
- Store

- Music
- Playlists
- Radio

Add a container element with the `tab` class. And add child elements with the `tab-item` class. You can add the `tab-block` class for a full-width tab. The `tab-item` or its child <a> with the `active` class will be highlighted.

    <ul class="tab tab-block">
      <li class="tab-item active">
        <a href="#">Music</a>
      </li>
      <li class="tab-item">
        <a href="#" class="active">Playlists</a>
      </li>
      <li class="tab-item">
        <a href="#">Radio</a>
      </li>
      <li class="tab-item">
        <a href="#">Connect</a>
      </li>
    </ul>

- Music
- Playlists
- Radio

- Music
- Playlists
- Radio

If you need `badges` on tabs, you can add badge class to the element within `tab-item`.

    <ul class="tab tab-block">
      <li class="tab-item active">
        <a href="#" class="badge" data-badge="9">
          Music
        </a>
      </li>
    </ul>

- Music
- Playlists
- Radio
- Store

You could add a search box or buttons inside a tab. Add the `tab-action` class to the `tab-item`.

    <ul class="tab">
      <li class="tab-item active">
        <a href="#">
          Music
        </a>
      </li>
      <li class="tab-item tab-action">
        <div class="input-group input-inline">
          <input class="form-input input-sm" type="text" placeholder="search">
          <button class="btn btn-primary btn-sm input-group-btn">Search</button>
        </div>
      </li>
    </ul>

### Tiles#

Tiles are repeatable or embeddable information blocks.

The Avengers

Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

The S.H.I.E.L.D.

The Strategic Homeland Intervention, Enforcement, and Logistics Division...

Add a container with the `tile` class. And add child elements with the `tile-icon`, `tile-content` or/and `tile-action` classes. The `tile-icon` and `tile-action` are optional.

There are `tile-title` and `tile-subtitle` classes for title and subtitle text styles.

    <div class="tile">
      <div class="tile-icon">
        <div class="example-tile-icon">
          <i class="icon icon-file centered"></i>
        </div>
      </div>
      <div class="tile-content">
        <p class="tile-title">The Avengers</p>
        <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
      </div>
      <div class="tile-action">
        <button class="btn btn-primary">Join</button>
      </div>
    </div>

#### Compact tiles#

There is compact version of Tiles component, which is often used as contact and file info blocks.

Add the `tile-centered` class to the container `tile`. The `tile-icon`, `tile-content` and `tile-action` will be vertically centered.

spectre-docs.pdf
14MB · Public · 1 Jan, 2017

    <div class="tile tile-centered">
      <div class="tile-icon">
        <div class="example-tile-icon">
          <i class="icon icon-file centered"></i>
        </div>
      </div>
      <div class="tile-content">
        <div class="tile-title">spectre-docs.pdf</div>
        <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div>
      </div>
      <div class="tile-action">
        <button class="btn btn-link">
          <i class="icon icon-more-vert"></i>
        </button>
      </div>
    </div>

### Toasts#

Toasts are used to show alert or information to users.

###### Toast Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Add a container element with the `toast` class. You can add any text within the container, and even icons. You may also add a close button with the `btn-clear` class if you need.

    <div class="toast">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>

Toast success
Toast warning
Toast error

And you can add the `toast-primary`, `toast-success`, `toast-warning` or `toast-error` class for additional toast colors.

    <div class="toast toast-primary">
      <button class="btn btn-clear float-right"></button>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>

### Tooltips#

Tooltips provide context information labels that appear on hover and focus.

Tooltips component is built entirely in CSS.

Add the `tooltip` class and the `data-tooltip` attribute, which contains the tooltip content, to non self closing elements.

And add the `tooltip-right`, `tooltip-bottom` or `tooltip-left` class to define the position of a tooltip. By default, the tooltip appears above the element.

    <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
    <button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>

Documents · GitHub · Twitter · PayPal Donate · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.