{"id":22126347,"url":"https://github.com/funny-family/solid-js-tooltip","last_synced_at":"2025-03-24T08:19:08.280Z","repository":{"id":197538911,"uuid":"698843439","full_name":"funny-family/solid-js-tooltip","owner":"funny-family","description":"Tooltips for your application 💬","archived":false,"fork":false,"pushed_at":"2024-02-11T15:42:02.000Z","size":340,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T07:40:38.309Z","etag":null,"topics":["component","directive","javascript","solid-js","solidjs","tooltip","typescript"],"latest_commit_sha":null,"homepage":"https://funny-family.github.io/solid-js-tooltip/","language":"TypeScript","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/funny-family.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-01T06:17:34.000Z","updated_at":"2024-01-09T03:49:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"86d7f416-ca3e-4418-9c47-717257f16c4c","html_url":"https://github.com/funny-family/solid-js-tooltip","commit_stats":null,"previous_names":["funny-family/solid-js-tooltip"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funny-family%2Fsolid-js-tooltip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funny-family%2Fsolid-js-tooltip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funny-family%2Fsolid-js-tooltip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funny-family%2Fsolid-js-tooltip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/funny-family","download_url":"https://codeload.github.com/funny-family/solid-js-tooltip/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245232934,"owners_count":20581704,"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":["component","directive","javascript","solid-js","solidjs","tooltip","typescript"],"created_at":"2024-12-01T16:55:35.809Z","updated_at":"2025-03-24T08:19:08.254Z","avatar_url":"https://github.com/funny-family.png","language":"TypeScript","readme":"\u003cp\u003e\n  \u003cimg width=\"100%\" src=\"https://assets.solidjs.com/banner?type=solid-js-tooltip\u0026background=tiles\u0026project=%20\" alt=\"solid-js-tooltip\"\u003e\n\u003c/p\u003e\n\n# solid-js-tooltip\n\n[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge\u0026logo=pnpm)](https://pnpm.io/)\n\n\u003cimg width=\"100%\" src=\"./public/tooltip-position.png\" alt=\"Tooltip position explain.\"\u003e\n\n## Quick start\n\n### Installation:\n\n```bash\nnpm i solid-js-tooltip\n# or\nyarn solid-js-tooltip\n# or\npnpm add solid-js-tooltip\n```\n\n### [Demo here!](https://funny-family.github.io/solid-js-tooltip/)\n\n---\n\n### Setup:\n\n```ts\nimport { type TooltipDirective, tooltip } from 'solid-js-tooltip';\nimport 'solid-js-tooltip/styles.css';\n\n// https://github.com/solidjs/solid/discussions/845\ntooltip;\n\ndeclare module 'solid-js' {\n  namespace JSX {\n    interface Directives extends TooltipDirective {}\n  }\n}\n```\n\n### Examples:\n\n```tsx\nimport { tooltip, Tooltip } from 'solid-js-tooltip';\n\n...\n\n\u003cp\n  use:tooltip={{\n    tooltips: [\n      {\n        element: (\n          \u003cTooltip class=\"tooltip\"\u003e\n            What...\n          \u003c/Tooltip\u003e\n        ),\n        position: 'top-center',\n      },\n    ],\n  }}\n  tabIndex={0}\n\u003e\n  This is bla, bla, bla and bla...\n\u003c/p\u003e\n```\n\n```tsx\nimport { tooltip, Tooltip } from 'solid-js-tooltip';\n\n...\n\n\u003cp\n  use:tooltip={{\n    tooltips: [\n      {\n        element: (\n          \u003cTooltip class=\"tooltip\"\u003e\n            What...\n          \u003c/Tooltip\u003e\n        ),\n        position: 'top-center',\n      },\n      {\n        element: (\n          \u003cTooltip class=\"tooltip\"\u003e\n            is ... this...\n          \u003c/Tooltip\u003e\n        ),\n        position: 'right-center',\n      },\n    ],\n  }}\n  tabIndex={0}\n\u003e\n  Etiam dictum eleifend justo, sit amet porttitor lectus ullamcorper eget. Morbi\n  aliquet, nibh non porta euismod, metus est tincidunt ex, id vehicula massa\n  metus id arcu. Nunc quis tincidunt metus, eu dapibus ligula.\n\u003c/p\u003e\n```\n\n```tsx\nimport { tooltip, Tooltip } from 'solid-js-tooltip';\n\n...\n\n\u003cp\n  class=\"highlight-text\"\n  use:tooltip={{\n    tooltips: [\n      {\n        element: (\n          \u003cTooltip class=\"tooltip\"\u003e\n            Hey! I am describing something...\n          \u003c/Tooltip\u003e\n        ),\n        displayOnHover: false,\n      },\n    ],\n    onFocusin: (event) =\u003e {\n      console.log('\"focusin\" event:\"', event);\n    },\n  }}\n  tabIndex={0}\n\u003e\n  Maecenas blandit arcu eget rutrum sodales. Vestibulum tempor mi nec metus\n  elementum fermentum. Aenean a gravida justo, nec pharetra massa.\n\u003c/p\u003e\n```\n\n```tsx\nimport { type TooltipComponent, Tooltip as BaseTooltip } from 'solid-js-tooltip';\nimport 'styles.css';\n\n// You can use \"Tooltip\" component as base for your custom tooltip.\nexport const Tooltip: TooltipComponent = (props) =\u003e {\n  return (\n    \u003cBaseTooltip {...props} class={`${props?.class || ''} tooltip`}\u003e\n      \u003cdiv\u003e\n        \u003cdiv\u003e\n          ...\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/BaseTooltip\u003e\n  )\n};\n\n...\n\nimport { tooltip } from 'solid-js-tooltip';\nimport { Tooltip } from './custom-tooltip-component-from-somewhere';\n\n\u003cp\n  use:tooltip={{\n    tooltips: [\n      {\n        element: (\n          \u003cTooltip\u003e\n            Hey! I am describing something...\n          \u003c/Tooltip\u003e\n        ),\n        displayOnHover: false,\n      },\n    ],\n    onFocusin: (event) =\u003e {\n      console.log('\"focusin\" event:\"', event);\n    },\n  }}\n  tabIndex={0}\n\u003e\n  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, suscipit?\n\u003c/p\u003e\n```\n\n### Component API:\n\n`Tooltip` component has the same attributes and events as `HTMLDivElement` and serves as a base for your custom tooltip.\n\n#### Default props:\n\n| Prop name                      | Type      | Description                                                                                               | Default value        |\n| ------------------------------ | --------- | --------------------------------------------------------------------------------------------------------- | -------------------- |\n| `class`                        | `string`  | [read on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class)                  | `'solid-js-tooltip'` |\n| `role`                         | `string`  | [read on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role)         | `'tooltip'`          |\n| `tabindex`                     | `number`  | [read on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)               | `-1`                 |\n| `inert`                        | `boolean` | [read on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert)                  | `true`               |\n| `aria-label`                   | `string`  | [read on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)      | `'tooltip'`          |\n| `aria-labelledby`              | `string`  | [read on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) | `'tooltip'`          |\n| `aria-hidden`                  | `boolean` | [read on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden)     | `true`               |\n| `data-tooltip-sr-notification` | `string`  | Data attribute that notifies the screen reader user that this element has a tooltip.                      | `'; Has tooltip: '`  |\n\n### Directive API:\n\n| Option name    | Type                      | Description                                                                                                                                                       |\n| -------------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `tooltips`     | `object`                  | Array of options for each defined tooltip.                                                                                                                        |\n| `onMouseEnter` | `function` or `undefined` | Event that occurs when the mouse pointer enters an element. [(reference)](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#listener) |\n| `onMouseLeave` | `function` or `undefined` | Event that occurs when the mouse pointer leaves an element. [(reference)](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#listener) |\n| `onFocusIn`    | `function` or `undefined` | Event that occurs when an element gets focus. [(reference)](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#listener)               |\n| `onFocusOut`   | `function` or `undefined` | Event that occurs when an element loses focus. [(reference)](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#listener)              |\n\n#### `tooltips` option:\n\n| Option name      | Type                                                                                                                                                                                                                                                                                           | Description                                                                                     |\n| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |\n| `element`        | `object`                                                                                                                                                                                                                                                                                       | Element used as a tooltip.                                                                      |\n| `position`       | `top-left-corner` or `top-left` or `top-center` or `top-right` or `top-right-corner` or `right-top` or `right-center` or `right-bottom` or `bottom-right-corner` or `bottom-right` or `bottom-center` or `bottom-left` or `bottom-left-corner` or `left-bottom` or `left-center` or `left-top` | Tooltip position. By default it is `top-left` position.                                         |\n| `displayOnHover` | `boolean` or `undefined`                                                                                                                                                                                                                                                                       | Controls whether a tooltip is displayed when hovering over an element. Bu default is is `true`. |\n| `displayOnFocus` | `boolean` or `undefined`                                                                                                                                                                                                                                                                       | Controls whether a tooltip is displayed when focusing over an element. Bu default is is `true`. |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffunny-family%2Fsolid-js-tooltip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffunny-family%2Fsolid-js-tooltip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffunny-family%2Fsolid-js-tooltip/lists"}