https://github.com/davidfig/tooltip
Simple vanilla-javascript tooltip replacement.
https://github.com/davidfig/tooltip
Last synced: about 1 month ago
JSON representation
Simple vanilla-javascript tooltip replacement.
- Host: GitHub
- URL: https://github.com/davidfig/tooltip
- Owner: davidfig
- Created: 2018-03-04T05:21:21.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-12-04T17:12:02.000Z (over 5 years ago)
- Last Synced: 2025-03-06T15:16:34.529Z (about 1 year ago)
- Language: JavaScript
- Size: 724 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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: '
First lineSecond line', 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/)