Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
editorjs-tooltip
Advanced tools
Readme
Tooltip for Editor.js.
Get the package
$ npm i --save-dev editorjs-tooltip
Include module at your application
import Tooltip from 'editorjs-tooltip';
You can load a specific version of the package from jsDelivr CDN.
Require this script on a page with Editor.js.
<script src="https://cdn.jsdelivr.net/npm/editorjs-tooltip"></script>
Add a new Tool to the tools
property of the Editor.js initial config.
const editor = EditorJS({
tools: {
tooltip: {
class: Tooltip,
config: {
location: 'left',
underline: true,
placeholder: 'Enter a tooltip',
highlightColor: '#FFEFD5',
backgroundColor: '#154360',
textColor: '#FDFEFE',
holder: 'editorId',
}
}
}
});
Select 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.
Note: Use the holder field to indicate the EditorJS Id passed in the div tag, by default the holder field is 'editorjs'.
Field | Type | Description |
---|---|---|
location | String (top , bottom , left , right ) | Where to place the tooltip. Default value is bottom . |
underline | Boolean | Add underline text decoration to the text wrapped by the tooltip. Default is false . |
placeholder | String | Placeholder text for the tooltip input. Default is 'Add a tooltip'. |
highlightColor | String or Hexadecimal | Background color of the text wrapped by the tooltip. |
backgroundColor | String or Hexadecimal | Background color of the tooltip container. |
textColor | String or Hexadecimal | Text color of the tooltip. |
holder | String | ID of the HTML element that contains the EditorJS instance. Default is 'editorjs'. |
Selected text will be wrapped in a span tag with a cdx-tooltip class and with a data-tooltip, it contains the tooltip text.
{
"type" : "text",
"data" : {
"text" : "It is a text to the <span class=\"cdx-tooltip\" data-tooltip =\"tooltip\" >tooltip</span> inline-tool."
}
}
Development mode
$ yarn build:dev
Production release
$ yarn build
dist/bundle.js
Run Linter The linter tool will help you by analyzing source code and fix common errors, or by following the style conventions defined.
$ yarn lint .
Run tests
$ yarn test
We welcome everyone to contribute. Make sure you have read the CODE_OF_CONDUCT before.
For information on how to contribute, please refer to our CONTRIBUTING guide.
Features and bug fixes are listed in the CHANGELOG file.
This library is licensed under an MIT license. See LICENSE for details.
Made with 💙 by kommitters Open Source
FAQs
Tooltip tool for Editor.js
The npm package editorjs-tooltip receives a total of 834 weekly downloads. As such, editorjs-tooltip popularity was classified as not popular.
We found that editorjs-tooltip demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.