# @pirxpilot/tip

> Tip component

Latest version **4.1.1** (published 2026-07-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @pirxpilot/tip
pnpm add @pirxpilot/tip
yarn add @pirxpilot/tip
bun add @pirxpilot/tip
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 4.1.1 |
| Published | 2026-07-09 |
| First published | 2017-02-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 3 |
| Unpacked size | 15 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | pirxpilot |
| Keywords | browser, component, tooltip, tip, ui |

## Links

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

## Dependencies (3)

- [@pirxpilot/events](https://npm.io/package/@pirxpilot/events.md) ~3
- [component-emitter](https://npm.io/package/component-emitter.md) ~2
- [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

- 4.1.1 (latest) — 2026-07-09
- 4.1.0 — 2025-12-22
- 4.0.0 — 2025-04-27
- 3.1.1 — 2022-06-28
- 3.1.0 — 2022-04-24
- 3.0.3 — 2022-04-13
- 3.0.2 — 2019-07-10
- 3.0.1 — 2018-11-30
- 3.0.0 — 2018-11-29
- 2.5.4 — 2017-12-13
- 2.5.3 — 2017-03-19
- 2.5.2 — 2017-02-19

## README

[![NPM version][npm-image]][npm-url]
[![Build Status][build-image]][build-url]
[![Dependency Status][deps-image]][deps-url]

# Tip

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


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

## Installation

```sh
$ npm install @pirxpilot/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

[npm-image]: https://img.shields.io/npm/v/@pirxpilot/tip
[npm-url]: https://npmjs.org/package/@pirxpilot/tip

[build-url]: https://github.com/pirxpilot/tip/actions/workflows/check.yaml
[build-image]: https://img.shields.io/github/actions/workflow/status/pirxpilot/tip/check.yaml?branch=main

[deps-image]: https://img.shields.io/librariesio/release/npm/@pirxpilot/tip
[deps-url]: https://libraries.io/npm/@pirxpilot%2Ftip

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