https://github.com/arashmanteghi/simptip

A simple CSS tooltip made with Sass
https://github.com/arashmanteghi/simptip

css-tooltip tooltip

Last synced: about 1 month ago
JSON representation

A simple CSS tooltip made with Sass

• Host: GitHub
• URL: https://github.com/arashmanteghi/simptip
• Owner: arashmanteghi
• License: mit
• Created: 2013-10-16T08:29:21.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2018-03-06T19:52:56.000Z (almost 7 years ago)
• Last Synced: 2024-11-01T02:05:24.462Z (about 2 months ago)
• Topics: css-tooltip, tooltip
• Language: CSS
• Homepage: http://arashm.net/lab/simptip/
• Size: 40 KB
• Stars: 648
• Watchers: 28
• Forks: 88
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-javascript - simptip - A simple CSS tooltip made with Sass - ★ 642 (Tips)

README

        
# Simptip [v1.0.4]

#### A simple CSS tooltip made with Sass

### [Visit Site, Documentation and some examples](http://arashm.net/lab/simptip/)

### Installation

Install with [npm](https://www.npmjs.com/), [Yarn](https://yarnpkg.com/) or [Bower](https://bower.io/):

npm:

```sh

npm install simptip --save

```

Yarn (note that `yarn add` automatically saves the package to the `dependencies` in `package.json`):

```sh

yarn add simptip

```

Bower:

```sh

bower add simptip --save

```

### Usage

I'll explain with an example:

```html

```

or:

```html

```

Then you can do something like this:

```html

 Text 

```

What you see in the data-tooltip attribute is the text content of the tooltips, and the value of class attribute is tooltop's position.

You can use `.simptip-position-right` , `.simptip-position-bottom` and `.simptip-position-left` class for other positions that you would like.

You can also use more features of Simptip by adding these classes:

- `.half-arrow` : change tooltip's arrow to half arrow

- `.simptip-smooth` : makes soft edge for tooltip

- `.simptip-fade` : fades effect for show/hide

- `.simptip-movable` : shows movable effect

- `.simptip-multiline` : makes multiline body for tooltip

- `.simptip-success` : changes color to green spectrum

- `.simptip-info` : changes color to blue spectrum

- `.simptip-warning` : changes color to orange spectrum

- `.simptip-danger` : changes color to red spectrum

###### [Let me know if you use it in your projects.](https://twitter.com/arashmanteghi)

### License

Copyright (c) 2013 @arashmanteghi

Licensed under the [MIT license](http://opensource.org/licenses/MIT).