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.
@jablonski/react-tooltip
Advanced tools
Readme
Documentation for V4 - Github Page.
Documentation for V5 - ReactTooltip.
npm install react-tooltip
or
yarn add react-tooltip
1 . Require react-tooltip after installation
import { Tooltip } from 'react-tooltip'
or if you want to still use the name ReactTooltip as V4:
import { Tooltip as ReactTooltip } from 'react-tooltip'
2 . Add data-tooltip-content = "your placeholder" to your element
<p id="my-element" data-tooltip-content="hello world">
Tooltip
</p>
3 . Include react-tooltip component
<ReactTooltip anchorId="my-element" />
You can import node_modules/react-tooltip/dist/react-tooltip.[mode].js
into your page. Please make sure that you have already imported react
and react-dom
into your page.
mode: esm
cjs
umd
If you want to use default ReactTooltip styles, don't forget to import the styles: node_modules/react-tooltip/dist/react-tooltip.css
PS: all the files has a minified version and a not minified version.
For all available options, please check React Tooltip Options
The html
option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like sanitize-html. We chose not to include sanitization after discovering it increased our package size too much - we don't want to penalize people who don't use the html
option.
You can use React's renderToStaticMarkup
-function to use JSX instead of HTML.
Example:
import ReactDOMServer from 'react-dom/server';
[...]
<p id="my-element" data-tooltip-html={ReactDOMServer.renderToString(<div>I am <b>JSX</b> content</div>)}>
Hover me
</p>
<ReactTooltip anchorId="my-element" />
finds the tooltip via this attributeHow I insert sass into react component
danielbarion Maintainer - Creator of React Tooltip >= V5.
aronhelser Passive maintainer - accepting PRs and doing minor testing, but not fixing issues or doing active development.
alexgurr (inactive).
pdeszynski (inactive).
roggervalf (inactive).
huumanoid (inactive)
wwayne (inactive) - Creator of the original React Tooltip (V1.x ~ V4.x.)
We would gladly accept a new maintainer to help out!
We welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our contributing doc has some details.
MIT
FAQs
react tooltip component
The npm package @jablonski/react-tooltip receives a total of 1 weekly downloads. As such, @jablonski/react-tooltip popularity was classified as not popular.
We found that @jablonski/react-tooltip demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.