react-image-tooltips

React component that implements an image with tooltips

Usage no npm install needed!

<script type="module">
  import reactImageTooltips from 'https://cdn.skypack.dev/react-image-tooltips';
</script>

README

react-image-tooltips

NPM version Minified size Minified + gzip size

React component that implements an image with tooltips (hot spots). May be useful for creating interactive images which user can click/tap on and see description of what is presented on the image.

DEMO

Install

react-spring is used for accordion animation so it's peer dependency that should be installed with react-image-tooltips.

npm install --save react-spring react-image-tooltips

Usage

import {ImageTooltips, ImageTooltipsItem, ImageTooltipsTrigger} from "react-image-tooltips";
import "react-image-tooltips/dist/index.css";

// ...

    const MyTrigger = (<ImageTooltipsTrigger className="my-trigger">
        +
    </ImageTooltipsTrigger>);
    
    <ImageTooltips src="example.jpg" width={816} height={544} className="my-image" triggerEvent="click">
        <ImageTooltipsItem top={226} left={301} trigger={MyTrigger} className="my-item">
            <p>Here's some content that lies inside an tooltip.</p>
            <p>This content can only be viewed, once the tooltip is toggled.</p>
        </ImageTooltipsItem>
        <ImageTooltipsItem top={300} left={504} trigger={MyTrigger} className="my-item">
            <p>Here's some content that lies inside an tooltip.</p>
            <p>This content can only be viewed, once the tooltip is toggled.</p>
        </ImageTooltipsItem>
    </ImageTooltips>

License

MIT © krasnoshapka