{"id":20596081,"url":"https://github.com/davidfig/tooltip","last_synced_at":"2026-04-21T19:03:00.424Z","repository":{"id":56135808,"uuid":"123759531","full_name":"davidfig/tooltip","owner":"davidfig","description":"Simple vanilla-javascript tooltip replacement.","archived":false,"fork":false,"pushed_at":"2020-12-04T17:12:02.000Z","size":741,"stargazers_count":3,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-06T15:16:34.529Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidfig.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-04T05:21:21.000Z","updated_at":"2024-07-01T18:20:40.000Z","dependencies_parsed_at":"2022-08-15T13:20:54.756Z","dependency_job_id":null,"html_url":"https://github.com/davidfig/tooltip","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/davidfig/tooltip","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidfig%2Ftooltip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidfig%2Ftooltip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidfig%2Ftooltip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidfig%2Ftooltip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidfig","download_url":"https://codeload.github.com/davidfig/tooltip/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidfig%2Ftooltip/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32105868,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-21T11:25:29.218Z","status":"ssl_error","status_checked_at":"2026-04-21T11:25:28.499Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-16T08:15:05.986Z","updated_at":"2026-04-21T19:03:00.393Z","avatar_url":"https://github.com/davidfig.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# yy-tooltip\nSimple vanilla-javascript tooltip replacement. \n\n## rationale\n\nI 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.\n\nThis 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)). \n\n## installation\n\n    npm i yy-tooltip\n\n## programmatic example\n\n```js\nconst Tooltip = require('yy-tooltip')\n\nconst element = document.getElementById('test')\nnew Tooltip(element, { title: '\u003cdiv\u003eFirst line\u003c/div\u003e\u003cdiv\u003eSecond line\u003c/div\u003e', styles: { background: 'black', color: 'white' }})\n```\n\n## live example\nhttps://davidfig.github.io/tooltip/\n\n## API\n```js\n    /**\n     * Add tooltip to an element\n     * @param {(HTMLElement|string)} element or querySelector() input\n     * @param {string} html\n     * @param {object} [options]\n     * @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'\n     * @param {object} [options.styles] additional styles to apply to tooltip (e.g., backgroundColor: 'red')\n     * @param {boolean} [options.className] use class name instead of styles for tooltip box (ignores options.styles)\n     * @param {HTMLElement} [options.parent=document.body] parent to attach tooltip div\n     * @param {number} [options.duration=250] fade-in/out in milliseconds\n     * @param {number} [options.wait=500] milliseconds to wait before showing tooltip\n     * @param {(string|Function)} [options.ease=easeInOutSine] name of ease (@see https://github.com/bcherny/penner#readme for names)\n     */\n    constructor(element, html, options = {})\n\n    /** removes tooltip */\n    remove()\n    {\n        this.parent.removeChild(this.div)\n        this.div = null\n    }\n\n    /**\n     * @type {string}\n     * gets/sets change html of tooltip\n     */\n    get html()\n\n    /**\n     * @type {number}\n     * get/set default fade in/out duration in milliseconds\n     * defaults to 250\n     */\n    static get animationDuration()\n\n    /**\n     * @type {(string|function)}\n     * get/set default ease function (or function name) to use for tooltip fade\n     * defaults to 'easeInOutSine'\n     */\n    static get animationEase()\n\n    /**\n     * @type {number}\n     * get/set default wait time for fade in/out duration in milliseconds\n     * defaults to 500\n     */\n    static get animationEase()\n\n/**\n * @type {object}\n * default styles to apply to tooltip div\n */\nTooltip.styles = {\n\n/**\n * @type {HTMLElement}\n * element to attach div\n */\nTooltip.parent = document.body\n\n```\n## License  \nMIT License  \n(c) 2018 [YOPEY YOPEY LLC](https://yopeyopey.com/) by [David Figatner](https://twitter.com/yopey_yopey/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidfig%2Ftooltip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidfig%2Ftooltip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidfig%2Ftooltip/lists"}