{"id":13770268,"url":"https://github.com/kommitters/editorjs-tooltip","last_synced_at":"2025-07-31T17:32:30.087Z","repository":{"id":40415911,"uuid":"411740061","full_name":"kommitters/editorjs-tooltip","owner":"kommitters","description":"Tooltips for editorjs","archived":false,"fork":false,"pushed_at":"2024-05-17T01:37:42.000Z","size":2537,"stargazers_count":33,"open_issues_count":2,"forks_count":15,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-05-19T14:32:33.747Z","etag":null,"topics":["editorjs","editorjs-tool","javascript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/editorjs-tooltip","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/kommitters.png","metadata":{"funding":{"github":["kommitters"]},"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-29T16:00:07.000Z","updated_at":"2024-05-20T17:44:46.723Z","dependencies_parsed_at":"2024-01-26T17:25:29.079Z","dependency_job_id":"3d944d30-12f3-4e06-aa14-fd3478ceb980","html_url":"https://github.com/kommitters/editorjs-tooltip","commit_stats":{"total_commits":60,"total_committers":13,"mean_commits":4.615384615384615,"dds":0.6833333333333333,"last_synced_commit":"a238d0091da52f90bfe52c617c0d275df616a224"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kommitters%2Feditorjs-tooltip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kommitters%2Feditorjs-tooltip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kommitters%2Feditorjs-tooltip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kommitters%2Feditorjs-tooltip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kommitters","download_url":"https://codeload.github.com/kommitters/editorjs-tooltip/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228275015,"owners_count":17895008,"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":["editorjs","editorjs-tool","javascript"],"created_at":"2024-08-03T17:00:35.770Z","updated_at":"2024-12-05T10:14:05.264Z","avatar_url":"https://github.com/kommitters.png","language":"JavaScript","funding_links":["https://github.com/sponsors/kommitters"],"categories":["Tools"],"sub_categories":["Inline Tools"],"readme":"# EditorJS Tooltip Inline-tool\n\n![stability-stable](https://img.shields.io/badge/stability-stable-green.svg)\n![](https://badgen.net/badge/Editor.js/v2.0/blue)\n[![Coverage Status](https://coveralls.io/repos/github/kommitters/editorjs-tooltip/badge.svg)](https://coveralls.io/github/kommitters/editorjs-tooltip)\n[![OpenSSF Best Practices](https://bestpractices.coreinfrastructure.org/projects/6470/badge)](https://bestpractices.coreinfrastructure.org/projects/6470)\n[![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/kommitters/editorjs-tooltip/badge)](https://api.securityscorecards.dev/projects/github.com/kommitters/editorjs-tooltip)\n\nTooltip for [Editor.js](https://editorjs.io).\n\n![](assets/demo.gif)\n## Notes\n\n- Adds a tooltip as an inline-tool in Editor.js.\n- Custom styles to the selected text.\n- Custom tooltip location.\n- Custom styles to the tooltips.\n\n## Installation\n\n### Install via NPM\nGet the package\n\n```shell\n$ npm i --save-dev editorjs-tooltip\n```\n\nInclude module at your application\n\n```javascript\nimport Tooltip from 'editorjs-tooltip';\n```\n\n### Load from CDN\n\nYou can load a specific version of the package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/editorjs-tooltip).\n\nRequire this script on a page with Editor.js.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/editorjs-tooltip\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nAdd a new Tool to the `tools` property of the Editor.js initial config.\n\n```javascript\nconst editor = EditorJS({\n  tools: {\n    tooltip: {\n      class: Tooltip,\n      config: {\n        location: 'left',\n        underline: true,\n        placeholder: 'Enter a tooltip',\n        highlightColor: '#FFEFD5',\n        backgroundColor: '#154360',\n        textColor: '#FDFEFE',\n        holder: 'editorId',\n      }\n    }\n  }\n});\n```\nSelect some text, click on the tooltip button in the inline-tools bar, and type the tooltip in the input, when the key enter is pressed, the tooltip will be created.\n\n**Note:** Use the holder field to indicate the EditorJS Id passed in the div tag, by default the holder field is 'editorjs'.\n\n## Config Params\n\n| Field | Type | Description |\n| -------- | -------- | -------- |\n| `location`     | String (`top`, `bottom`, `left`, `right`) | Where to place the tooltip. Default value is `bottom`. |\n| `underline`     | Boolean | Add underline text decoration to the text wrapped by the tooltip. Default is `false`. |\n| `placeholder`     | String | Placeholder text for the tooltip input. Default is 'Add a tooltip'. |\n| `highlightColor`     | String or Hexadecimal | Background color of the text wrapped by the tooltip. |\n| `backgroundColor`     | String or Hexadecimal | Background color of the tooltip container. |\n| `textColor`     | String or Hexadecimal | Text color of the tooltip. |\n| `holder`     | String | ID of the HTML element that contains the EditorJS instance. Default is 'editorjs'. |\n\n## Output data\n\nSelected text will be wrapped in a span tag with a cdx-tooltip class and with a data-tooltip, it contains the tooltip text.\n\n```json\n{\n    \"type\" : \"text\",\n    \"data\" : {\n        \"text\" : \"It is a text to the \u003cspan class=\\\"cdx-tooltip\\\" data-tooltip =\\\"tooltip\\\" \u003etooltip\u003c/span\u003e inline-tool.\"\n    }\n}\n```\n\n## Development\n\n**Development mode**\n```shell\n$ yarn build:dev\n```\n\n**Production release**\n1. Create a production bundle\n```shell\n$ yarn build\n```\n\n2. Commit `dist/bundle.js`\n\n**Run Linter**\nThe linter tool will help you by analyzing source code and fix common errors, or by following the style conventions defined.\n```shell\n$ yarn lint .\n```\n\n**Run tests**\n```shell\n$ yarn test\n```\n\n## Code of conduct\nWe welcome everyone to contribute. Make sure you have read the [CODE_OF_CONDUCT][coc] before.\n\n## Contributing\nFor information on how to contribute, please refer to our [CONTRIBUTING][contributing] guide.\n\n## Changelog\nFeatures and bug fixes are listed in the [CHANGELOG][changelog] file.\n\n## License\nThis library is licensed under an MIT license. See [LICENSE][license] for details.\n\n## Acknowledgements\nMade with 💙 by [kommitters Open Source](https://kommit.co)\n\n[license]: https://github.com/kommitters/editorjs-tooltip/blob/master/LICENSE\n[coc]: https://github.com/kommitters/editorjs-tooltip/blob/master/CODE_OF_CONDUCT.md\n[changelog]: https://github.com/kommitters/editorjs-tooltip/blob/master/CHANGELOG.md\n[contributing]: https://github.com/kommitters/editorjs-tooltip/blob/master/CONTRIBUTING.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkommitters%2Feditorjs-tooltip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkommitters%2Feditorjs-tooltip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkommitters%2Feditorjs-tooltip/lists"}