# component-tip

> Tip component

Latest version **3.0.3** (published 2016-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install component-tip
pnpm add component-tip
yarn add component-tip
bun add component-tip
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.3 |
| Published | 2016-04-01 |
| First published | 2014-05-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 95 |
| Maintainers | amasad, anthonyshort, calvinfo, clintwood, coreh, cristiandouce, defunctzombie, dfcreative, dominicbarnes, forbeslindesay, hughsk, ianstormtaylor, jongleberry, juliangruber, kelonye, mattmueller, ockham, rauchg, retrofox, stagas, stephenmathieson, swatinem, thehydroimpulse, timaschew, tjholowaychuk, tootallnate, trevorgerhardt, yields |
| Keywords | browser, component, tooltip, tip, ui |

## Links

- npm: https://www.npmjs.com/package/component-tip
- Repository: https://github.com/component/tip
- Homepage: https://github.com/component/tip#readme
- Issues: https://github.com/component/tip/issues
- npm.io page: https://npm.io/package/component-tip

## Dependencies (10)

- [domify](https://npm.io/package/domify.md) 1.3.0
- [component-css](https://npm.io/package/component-css.md) 0.0.8
- [component-raf](https://npm.io/package/component-raf.md) 1.2.0
- [component-bind](https://npm.io/package/component-bind.md) *
- [component-query](https://npm.io/package/component-query.md) 0.0.3
- [html-browserify](https://npm.io/package/html-browserify.md) 0.0.4
- [component-events](https://npm.io/package/component-events.md) 1.0.10
- [component-classes](https://npm.io/package/component-classes.md) 1.2.6
- [component-emitter](https://npm.io/package/component-emitter.md) 1.1.3
- [bounding-client-rect](https://npm.io/package/bounding-client-rect.md) 1.0.5

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 3.0.3 (latest) — 2016-04-01
- 3.0.2 — 2016-04-01
- 3.0.1 — 2016-03-29
- 3.0.0 — 2016-03-25
- 2.5.0 — 2015-08-04
- 2.4.1 — 2015-02-26
- 2.3.5 — 2015-02-26
- 2.4.0 — 2015-01-28
- 2.3.4 — 2015-01-21
- 2.3.3 — 2015-01-20
- 2.3.2 — 2015-01-14
- 2.3.1 — 2014-12-17
- 2.3.0 — 2014-12-16
- 2.2.0 — 2014-12-12
- 2.1.2 — 2014-08-01
- … 3 more at https://npm.io/package/component-tip/versions

## README

# Tip

  Tip component. Inspired by [tipsy](https://github.com/jaz303/tipsy) without the weird jQuery
  API.

  ![js tip component](http://f.cl.ly/items/2H1D232Y0g1T3g1G0l3s/Screen%20Shot%202012-08-02%20at%202.31.50%20PM.png)
  ![js tip with markup](http://f.cl.ly/items/2h1F2B1P1C3M0g0a0M0n/Screen%20Shot%202012-08-02%20at%203.34.06%20PM.png)

  ![js maru](http://f.cl.ly/items/1I2V2o0q3M2p1E2H183w/Screen%20Shot%202012-08-02%20at%206.48.28%20PM.png)

  Live demo is [here](http://component.github.io/tip/).

## Installation

``` bash
$ npm install component-tip
```

## Features

  - events for composition
  - "auto" positioning on window resize / scroll
  - fluent API

## Events

  - `show` the tip is shown
  - `hide` the tip is hidden

## API

### Tip(el, string)

  Equivalent to `Tip(el, { value: string })`.

### Tip(el, [options])

  Attach a `Tip` to an element, and display the `title`
  attribute's contents on hover. Optionally apply a hide `delay`
  in milliseconds.
  Also if `static` is true the tip will be fixed to its initial position.

```js
var tip = require('tip');
tip('a[title]', { delay: 300 });
```

### new Tip(content, [options])

  Create a new tip with `content` being
  either a string, html, element, etc.

```js
var Tip = require('tip');
var tip = new Tip('Hello!');
tip.show('#mylink');
```

### Tip#position(type, [options])

  - `top`
  - `top right`
  - `top left`
  - `bottom`
  - `bottom right`
  - `bottom left`
  - `right`
  - `left`

Options:

  - `auto` set to __false__ to disable auto-positioning

### Tip#show(el)

  Show the tip attached to `el`, where `el`
  may be a selector or element.

### Tip#show(x, y)

  Show the tip at the absolute position `(x, y)`.

### Tip#hide([ms])

  Hide the tip immediately or wait `ms`.

### Tip#attach(el)

  Attach the tip to the given `el`, showing on `mouseover` and hiding on `mouseout`.

### Tip#effect(name)

  Use effect `name`. Default with `Tip.effect = 'fade'` for example.

### Themes

  - [Aurora](https://github.com/component/aurora-tip)
  - [Nightrider](https://github.com/jb55/nightrider-tip)

## License

  MIT

---
_Source: https://npm.io/package/component-tip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._