# code42day-tip

> Tip component

Latest version **2.5.1** (published 2015-09-17) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

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

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.5.1 |
| Published | 2015-09-17 |
| First published | 2015-09-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | pirxpilot |
| Keywords | browser, component, tooltip, tip, ui |

## Links

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

## Dependencies (8)

- [domify](https://npm.io/package/domify.md) ^1.3.0
- [code42day-css](https://npm.io/package/code42day-css.md) ~0
- [component-bind](https://npm.io/package/component-bind.md) *
- [component-query](https://npm.io/package/component-query.md) ~0
- [component-events](https://npm.io/package/component-events.md) ^1.0.9
- [component-classes](https://npm.io/package/component-classes.md) ^1.2.1
- [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

- 2.5.1 (latest) — 2015-09-17

## 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/code42day-tip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._