{"id":13453253,"url":"https://github.com/ytiurin/html5tooltipsjs","last_synced_at":"2025-05-16T12:11:30.641Z","repository":{"id":15587229,"uuid":"18323044","full_name":"ytiurin/html5tooltipsjs","owner":"ytiurin","description":"Tooltips with smooth 3D animation","archived":false,"fork":false,"pushed_at":"2018-07-07T21:47:09.000Z","size":9076,"stargazers_count":880,"open_issues_count":5,"forks_count":82,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-05-07T12:50:40.460Z","etag":null,"topics":["css","javascript","tooltip","tooltips"],"latest_commit_sha":null,"homepage":"http://ytiurin.github.io/html5tooltipsjs","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ytiurin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-04-01T08:43:45.000Z","updated_at":"2025-03-19T14:41:39.000Z","dependencies_parsed_at":"2022-08-26T19:01:42.068Z","dependency_job_id":null,"html_url":"https://github.com/ytiurin/html5tooltipsjs","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ytiurin%2Fhtml5tooltipsjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ytiurin%2Fhtml5tooltipsjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ytiurin%2Fhtml5tooltipsjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ytiurin%2Fhtml5tooltipsjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ytiurin","download_url":"https://codeload.github.com/ytiurin/html5tooltipsjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254527099,"owners_count":22085919,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["css","javascript","tooltip","tooltips"],"created_at":"2024-07-31T08:00:36.706Z","updated_at":"2025-05-16T12:11:30.592Z","avatar_url":"https://github.com/ytiurin.png","language":"JavaScript","readme":"[![npm](https://img.shields.io/npm/v/html5tooltipsjs.svg?maxAge=2592000)](https://www.npmjs.com/package/html5tooltipsjs)\n[![npm](https://img.shields.io/npm/dm/html5tooltipsjs.svg?maxAge=2592000)](https://www.npmjs.com/package/html5tooltipsjs)\n\nhtml5tooltips.js\n===============\nTooltips, written in pure JavaScript, with smooth 3D animation implemented in CSS. No framework required. [http://ytiurin.github.io/html5tooltipsjs](http://ytiurin.github.io/html5tooltipsjs)\n\n## Install\n```\nnpm install html5tooltipsjs\n```\nor\n```\nbower install html5tooltipsjs\n```\n\n## Simple usage\n\nThe simplest way to tie a tooltip to a specific UI element is to add a `data-*` attribute to an element's HTML code.\n\n```html\n\u003cspan data-tooltip=\"Refresh\"\u003e\u003c/span\u003e\n```\n\nAdd extra attributes to customize a tooltip.\n\n```html\n\u003cspan data-tooltip=\"Refresh\" data-tooltip-stickto=\"right\" data-tooltip-color=\"bamboo\"\n  data-tooltip-animate-function=\"foldin\"\u003e\u003c/span\u003e\n```\n\n### Customization inheritance\n\nTo customize multiple tooltips with less of code, add a `data-*` attribute to their shared parent element (or document body).\n\n```html\n\u003cbody data-tooltip-animate-function=\"foldin\"\u003e\n  \u003cdiv data-tooltip-color=\"bamboo\"\u003e\n    \u003cspan data-tooltip=\"Build\"\u003e\u003c/span\u003e\n    \u003cspan data-tooltip=\"Refresh\"\u003e\u003c/span\u003e\n    \u003cspan data-tooltip=\"Delete\"\u003e\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n```\n\n## Advanced usage\n\nYou may use a JavaScript constructor to abstract from your view layer.\n\n```javascript\nhtml5tooltips({\n  animateFunction: \"spin\",\n  color: \"bamboo\",\n  contentText: \"Refresh\",\n  stickTo: \"right\",\n  targetSelector: \"#refresh\"\n});\n```\n\nThere is an extra feature in html5tooltips.js that allows to show extended text in the tooltip, when user focuses on input field and editable element. You can use plain text or HTML formatting.\n\n```javascript\nhtml5tooltips({\n  contentText: \"Not less then 8 symbols\",\n  contentMore: \"Use lower and UPPER case letters, num\u003cspan style='color:red'\u003e6\u003c/span\u003eers and spec\u003cspan style='color:red'\u003e!\u003c/span\u003eal symbols to make password safe and secure.\",\n  maxWidth: \"180px\",\n  targetSelector: \"#password\"\n});\n```\n\nDefine multiple tooltips by passing an array of tooltip objects to the Javascript constructor.\n\n```javascript\nhtml5tooltips([\n  {\n    animateFunction: \"spin\",\n    color: \"#FF0000\",\n    contentText: \"Refresh\",\n    stickTo: \"right\",\n    targetSelector: \"#refresh\"\n  },\n  {\n    contentText: \"Simple to remember\",\n    contentMore: \"Check that your login name is not used by anyone else.\",\n    stickTo: \"left\",\n    maxWidth: \"180px\",\n    targetSelector: \"#username\"\n  }\n]);\n```\n\n## Styling\n\nTo modify tooltip presentation, simply apply styling to it's root element `.html5tooltip-box`. Properties `background-color`, `color`, `border-radius`, `box-shadow`, `font-family` and  `font-size` will propogate to the tooltip text container and pointer.\n\n```css\n.html5tooltip-box\n{\n  background-color: #2A2A2A;\n  border-radius: 2px;\n  box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 0 10px rgba(255,255,255,.15);\n  color: #F7F7F7;\n  font-family: arial,sans-serif;\n  font-size: 11px;\n  font-weight: bold;\n}\n```\n\n## For Single Page Applications\n\nRefresh tooltips when you update declarative announcement of tooltips or when DOM change, affecting tooltips target elements.\n\n```javascript\nhtml5tooltips.refresh();\n```\n\n## HTML5Tooltip UI Component\n\n```javascript\nvar tooltip = new HTML5TooltipUIComponent;\nvar target = document.getElementById(\"refresh\");\n\ntooltip.set({\n  animateFunction: \"spin\",\n  color: \"bamboo\",\n  contentText: \"Refresh\",\n  stickTo: \"right\",\n  target: target\n});\n\ntarget.addEventListener('mouseenter',function(){\n  tooltip.show();\n});\n\ntarget.addEventListener('mouseleave',function(){\n  tooltip.hide();\n});\n\ntooltip.mount();\n```\n\n## Get a tooltip by the target element\n\n```javascript\nvar tooltip = html5tooltips.getTooltipByTarget(document.getElementById('myElement'));\n\ntooltip.destroy();\n```\n\n## List of possible parameters\n\n- **animateFunction** - Choose one of the available animate functions: ``fadein``, ``foldin``, ``foldout``, ``roll``, ``scalein``, ``slidein``, ``spin``. Default value ``fadein``.\n- **color** - Any CSS color or one of the predefined colors: ``daffodil``, ``daisy``, ``mustard``, ``citrus-zest``, ``pumpkin``, ``tangerine``, ``salmon``, ``persimmon``, ``rouge``, ``scarlet``, ``hot-pink``, ``princess``, ``petal``, ``lilac``, ``lavender``, ``violet``, ``cloud``, ``dream``, ``gulf``, ``turquoise``, ``indigo``, ``navy``, ``sea-foam``, ``teal``, ``peacock``, ``ceadon``, ``olive``, ``bamboo``, ``grass``, ``kelly``, ``forrest``, ``chocolate``, ``terra-cotta``, ``camel``, ``linen``, ``stone``, ``smoke``, ``steel``, ``slate``, ``charcoal``, ``black``, ``white``, ``metalic-silver``, ``metalic-gold``, ``metalic-copper``.\n- **contentText** - Text for a tooltip; HTML may be applied.\n- **contentMore** - Text for the expanded version of a tooltip which shows up when focused on a target element; HTML may be applied.\n- **delay** - Delay the tooltip show up in milliseconds. Default value is ``500``.\n- **hideDelay** - Delay the tooltip hide in milliseconds, if the tooltip is persistent. Default value is ``300``.\n- **disableAnimation** - Disable the animation: ``true`` or ``false``. Default value is ``false``.\n- **maxWidth** - The maximum width of the expanded version of the tooltip.\n- **persistent** - If set to true, the tooltip will wait for `hideDelay` number of milliseconds before hide. Default value is `false`.\n- **stickTo** - Choose one of the available stick values: ``bottom``, ``left``, ``right``, ``top``. Default value is ``bottom``.\n- **stickDistance** - The ``number`` of pixels that represent the distance between the tooltip and a target element.\n- **targetSelector** - A CSS selector which is used to catch a target element in the document.\n\n## List of possible `data-*` attributes\n\n- **data-tooltip** - Value for the `contentText` parameter.\n- **data-tooltip-animate-function** - Value for the `animateFunction` parameter.\n- **data-tooltip-disable-animation** - Value for the `disableAnimation` parameter.\n- **data-tooltip-color** - Value for the `color` parameter.\n- **data-tooltip-delay** - Value for the `delay` parameter.\n- **data-tooltip-hide-delay** - Value for the `hideDelay` parameter.\n- **data-tooltip-maxwidth** - Value for the `maxWidth` parameter.\n- **data-tooltip-more** - Value for the `contentMore` parameter.\n- **data-tooltip-persistent** - Value for the `persistent` parameter.\n- **data-tooltip-stickto** - Value for the `stickTo` parameter.\n\n## Browser compatibility\n\nTooltips are compatible with old browsers including IE7. Animation works in Chrome 1.0, Firefox 2.0, Internet Explorer 10, Opera 10.5, Safari 3.2.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fytiurin%2Fhtml5tooltipsjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fytiurin%2Fhtml5tooltipsjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fytiurin%2Fhtml5tooltipsjs/lists"}