# yy-tooltip

> Yet another vanilla javascript tooltip library

Latest version **1.5.2** (published 2021-10-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install yy-tooltip
pnpm add yy-tooltip
yarn add yy-tooltip
bun add yy-tooltip
```

## 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 | 1.5.2 |
| Published | 2021-10-20 |
| First published | 2018-03-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | David Figatner |
| Maintainers | davidfig |

## Links

- npm: https://www.npmjs.com/package/yy-tooltip
- npm.io page: https://npm.io/package/yy-tooltip

## Dependencies (1)

- [dom-ease](https://npm.io/package/dom-ease.md) ^0.9.3

## Recent versions

- 1.5.2 (latest) — 2021-10-20
- 1.5.1 — 2021-10-20
- 1.5.0 — 2019-06-06
- 1.4.0 — 2019-06-01
- 1.3.0 — 2019-06-01
- 1.2.1 — 2018-03-13
- 1.2.0 — 2018-03-05
- 1.1.0 — 2018-03-05
- 1.0.0 — 2018-03-04

## README

# yy-tooltip
Simple vanilla-javascript tooltip replacement. 

## rationale

I wanted a simple replacement for the standard HTML tooltips that doesn't rely on stylesheets. It looks like the standard tooltip but accepts html and its style is more configurable. It attaches to the mouse position instead of the underlying div.

This was not designed to be as robust as other tooltip libraries (e.g., [tooltip.js](https://www.npmjs.com/search?q=tooltip.js), [tippy.js](https://www.npmjs.com/package/tippy.js)). 

## installation

    npm i yy-tooltip

## programmatic example

```js
const Tooltip = require('yy-tooltip')

const element = document.getElementById('test')
new Tooltip(element, { title: '<div>First line</div><div>Second line</div>', styles: { background: 'black', color: 'white' }})
```

## live example
https://davidfig.github.io/tooltip/

## API
```js
    /**
     * Add tooltip to an element
     * @param {(HTMLElement|string)} element or querySelector() input
     * @param {string} html
     * @param {object} [options]
     * @param {TooltipLocation} [options.location] unset: corner at cursor; otherwise a combination of "top/center/bottom + left/center/right", e.g., 'top-center', 'center+right', 'rightbottom', center'
     * @param {object} [options.styles] additional styles to apply to tooltip (e.g., backgroundColor: 'red')
     * @param {boolean} [options.className] use class name instead of styles for tooltip box (ignores options.styles)
     * @param {HTMLElement} [options.parent=document.body] parent to attach tooltip div
     * @param {number} [options.duration=250] fade-in/out in milliseconds
     * @param {number} [options.wait=500] milliseconds to wait before showing tooltip
     * @param {(string|Function)} [options.ease=easeInOutSine] name of ease (@see https://github.com/bcherny/penner#readme for names)
     */
    constructor(element, html, options = {})

    /** removes tooltip */
    remove()
    {
        this.parent.removeChild(this.div)
        this.div = null
    }

    /**
     * @type {string}
     * gets/sets change html of tooltip
     */
    get html()

    /**
     * @type {number}
     * get/set default fade in/out duration in milliseconds
     * defaults to 250
     */
    static get animationDuration()

    /**
     * @type {(string|function)}
     * get/set default ease function (or function name) to use for tooltip fade
     * defaults to 'easeInOutSine'
     */
    static get animationEase()

    /**
     * @type {number}
     * get/set default wait time for fade in/out duration in milliseconds
     * defaults to 500
     */
    static get animationEase()

/**
 * @type {object}
 * default styles to apply to tooltip div
 */
Tooltip.styles = {

/**
 * @type {HTMLElement}
 * element to attach div
 */
Tooltip.parent = document.body

```
## License  
MIT License  
(c) 2018 [YOPEY YOPEY LLC](https://yopeyopey.com/) by [David Figatner](https://twitter.com/yopey_yopey/)

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