React tooltip component
npm install react-tooltip-advancesh
npm install react-tooltip-advance
`
or
`sh
yarn add react-tooltip-advance
`
Usage
$3
1 . Require react-tooltip-advance after installation
`js
import { ReactTooltip as Tooltip } from "react-tooltip-advance";
`
2 . Add component with displayContent and tooltipContent values provided
`jsx
`
If you need graphic based tooltip then you can create a presentational component similar to one shown below.
`jsx
const ImageContent = (
src="https://media.istockphoto.com/id/1382384282/photo/bangalore-or-bengaluru.jpg?s=612x612&w=0&k=20&c=6pxwL3JxNV2B_NZSLMZLhrSLqAbyCPlGuSZYKImpjKQ="
width="200"
role="presentation"
/>
);
const renderContent = (type) => {
// your display content with html support
if (type === "displayContent") {
return ImageContent;
} else {
// your tooltip content with html support
return (
<>
{ImageContent}
Hello World!
>
);
}
};
;
`
3 . Internally it generated paragraph and span elements as shown below, do not worry about events and refs. Its needed purely for tooltip to function in a right way.
`jsx
{displayContent}
{tooltipContent}
``