{"id":19686336,"url":"https://github.com/closeio/smart-tooltip-delay","last_synced_at":"2025-10-23T20:25:46.754Z","repository":{"id":39018436,"uuid":"297373714","full_name":"closeio/smart-tooltip-delay","owner":"closeio","description":"Smart tooltip delay experience in a breeze","archived":false,"fork":false,"pushed_at":"2023-01-06T14:42:22.000Z","size":4875,"stargazers_count":5,"open_issues_count":18,"forks_count":0,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-04-14T18:49:51.531Z","etag":null,"topics":["delay","tooltip","tooltip-experience","ux"],"latest_commit_sha":null,"homepage":"","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/closeio.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":"2020-09-21T14:58:31.000Z","updated_at":"2023-05-17T14:19:03.000Z","dependencies_parsed_at":"2023-02-06T05:30:40.045Z","dependency_job_id":null,"html_url":"https://github.com/closeio/smart-tooltip-delay","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/closeio%2Fsmart-tooltip-delay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/closeio%2Fsmart-tooltip-delay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/closeio%2Fsmart-tooltip-delay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/closeio%2Fsmart-tooltip-delay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/closeio","download_url":"https://codeload.github.com/closeio/smart-tooltip-delay/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250850345,"owners_count":21497492,"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":["delay","tooltip","tooltip-experience","ux"],"created_at":"2024-11-11T18:27:33.881Z","updated_at":"2025-10-23T20:25:46.664Z","avatar_url":"https://github.com/closeio.png","language":"JavaScript","readme":"# smart-tooltip-delay\n\n[![NPM](https://img.shields.io/npm/v/@closeio/smart-tooltip-delay.svg)](https://www.npmjs.com/package/@closeio/smart-tooltip-delay) [![JavaScript Style Guide](https://img.shields.io/badge/code%20style-prettier-success)](https://prettier.io)\n\nSmart tooltip delay experience in a breeze.\n\n### \u003cimg width=\"680px\" height=\"80px\" src=\"./smart-tooltip-delay-example.gif\" /\u003e\n\nThis tiny library can help you create a tooltip experience where the first one is shown with a delay and any subsequent ones are shown immediately or with a different delay. After a defined amount of time of no tooltip activity, the original tooltip delay is restored.\n\nThe GIF above shows a smart tooltip delay where tooltips are shown after 600ms, but once the first one is shown, any subsequent ones are shown immediately. After 2500ms of no tooltip activity the original 600ms delay is restored.\n\n### \u003cimg height=\"40px\" src=\"./close.svg\" /\u003e\n\nInterested in working on projects like this? [Close](https://close.com) is looking for [great engineers](https://jobs.close.com) to join our team!\n\n## Install\n\n```bash\nyarn add @closeio/smart-tooltip-delay\n```\n\n## Benefits\n\n- Extremely lightweight (less than 400B minzipped).\n- Library-agnostic approach — you can combine multiple tooltip libraries and have the smart delay working for each.\n- No other 3rd-party dependencies.\n\n## API\n\nWhen instantiating `SmartTooltipDelay`, you can provide an object with 3 options:\n\n1. `delay` – default delay for each tooltip\n1. `noDelay` – delay set for each subsequently shown tooltip (going from `delay` to `noDelay`)\n1. `resetAfterTime` – time in milliseconds after which the default delay is restored (going from `noDelay` to `delay`)\n\n## Usage\n\nTo integrate with a tooltip library, follow these steps:\n\n1. `const instance = new SmartTooltipDelay({ delay: 600, noDelay: 0, resetAfterTime: 2500 })`\n1. Set your tooltip library's delay dynamically using\n   `instance.getCurrentDelay()` whenever the user attempts to show a tooltip\n1. Whenever a tooltip is shown, call `instance.show()`\n1. Whenever a tooltip is hidden, call `instance.hide()`\n1. Enjoy a smart tooltip experience\n\nYou can create a single `SmartTooltipDelay` instance for the entire app or you can create instances for each button toolbar.\n\n### Example using Tippy.js\n\nThis example uses a single shared smart delay and a tooltip library called Tippy.js.\n\n#### `sharedDelay.js`\n\n```jsx\nimport SmartTooltipDelay from '@closeio/smart-tooltip-delay';\n\nexport default new SmartTooltipDelay({\n  delay: 600,\n  noDelay: 0,\n  resetAfterTime: 2500,\n});\n```\n\n#### `MyTooltip.js`\n\n```jsx\nimport sharedSmartDelay from './sharedDelay.js';\n\nexport default function MyTooltip({ content /** … more props … */ }) {\n  // Show with a smart delay, hide immediately\n  const delayArrayRef = useRef([sharedSmartDelay.getCurrentDelay(), 0]);\n\n  // Update Tippy's delay when we try to interact with it.\n  const handleOnTrigger = useCallback(() =\u003e {\n    delayArrayRef.current[0] = sharedSmartDelay.getCurrentDelay();\n  }, []);\n\n  // Tell the smart delay that the tooltip has been shown.\n  const handleOnShow = useCallback(() =\u003e {\n    sharedSmartDelay.show();\n  }, []);\n\n  // Tell the smart delay that the tooltip has been hidden.\n  const handleOnHide = useCallback(() =\u003e {\n    sharedSmartDelay.hide();\n  }, []);\n\n  return (\n    \u003cTippy\n      delay={delayArrayRef.current}\n      onTrigger={handleOnTrigger}\n      onShow={handleOnShow}\n      onHide={handleOnHide}\n      // … more props\n    \u003e\n      {content}\n    \u003c/Tippy\u003e\n  );\n}\n```\n\n### Example using Bootstrap v2.3.2 Tooltips\n\nThis example uses a single shared smart delay and a tooltips from the Bootstrap framework.\n\n#### `sharedDelay.js`\n\n```jsx\nimport SmartTooltipDelay from '@closeio/smart-tooltip-delay';\n\nexport default new SmartTooltipDelay({\n  delay: 600,\n  noDelay: 0,\n  resetAfterTime: 2500,\n});\n```\n\n#### `applySmartDelay.js`\n\n```jsx\nimport $ from 'jquery';\nimport sharedSmartDelay from './sharedDelay.js';\n\n/**\n * Extends Bootstrap Tooltip v2.3.2 with smart delay.\n */\nexport default function applySmartDelay() {\n  // Do \"Smart\" tooltip delay by default.\n  $.fn.tooltip.defaults.delay = { show: sharedSmartDelay.getCurrentDelay() };\n\n  // Override Tooltip's `enter` method to sneak in a different \"show\" delay.\n  const Tooltip = $.fn.tooltip.Constructor;\n  const _enter = Tooltip.prototype.enter;\n  Tooltip.prototype.enter = function (e) {\n    const self = $(e.currentTarget).data(this.type);\n\n    if (self \u0026\u0026 self.options \u0026\u0026 self.options.hasSmartDelay) {\n      self.options.delay = { show: sharedSmartDelay.getCurrentDelay() };\n    }\n\n    _enter.call(this, e);\n  };\n\n  // Set the \"Smart\" behaviour without overriding potential custom per-tooltip delay.\n  const _getOptions = Tooltip.prototype.getOptions;\n  Tooltip.prototype.getOptions = function (initialOptions) {\n    const options = _getOptions.call(this, initialOptions);\n    // If delay wasn't set, and it is not 0, use smart delay\n    options.hasSmartDelay = !initialOptions.delay \u0026\u0026 initialOptions.delay !== 0;\n    return options;\n  };\n\n  $(document).on({\n    'show.bs.tooltip': sharedSmartDelay.show,\n    'hide.bs.tooltip': sharedSmartDelay.hide,\n  });\n}\n```\n\n## License\n\nMIT © [Close](https://github.com/closeio)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloseio%2Fsmart-tooltip-delay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloseio%2Fsmart-tooltip-delay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloseio%2Fsmart-tooltip-delay/lists"}