CODEWITHSUNDEEP
tooltiptooltipster
Gary Hu
Gary Hu

Reputation: 109

How to put several Tooltipster tooltips on a picture?

I make tooltips with the JQuery plugin Tooltipster but is confronted with a question. How can I show a tooltip when a user places the cursor at one specific position on a picture, say at the head of a person in a image. The image is in JPG format.

        <script>
        $(document).ready(function() {
            $('.Tooltip').tooltipster({
                animation: 'grow',
                delay: 100,
                interactive: true,
                zIndex: 1,
                maxWidth: 300,
                repositionOnScroll: true,
                trigger: 'custom',
                triggerOpen: {
                    mouseenter: true,
                    tap: true
                },
                triggerClose: {
                    mouseleave: true,
                    tap: true
                },
                coord: {
                    left: 100,
                    top: 100
                }
            });
        });
    </script>

I try to use the coord but it doesn't work. Did I do something wrong or miss something? Thank you.

Upvotes: 0

Views: 331

Answers (1)

padr
padr

Reputation: 415

You can achieve this by embedding an <svg> element into your html and putting your .jpg inside the <svg>. You can then define shapes on top of the image like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/
    <g>
        <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="yourImage.jpg"></image>
        <circle class="Tooltip" cx="263" cy="72" r="4" style="fill: rgb(206, 206, 206);" fill-opacity="0.4">
            <title>Your Tooltip</title>
        </circle>
    </g>
</svg>

Make sure to set the fill-opacity to 0 to make the shapes transparent.

Note: Tooltipster works well with SVGs, you just need to include a few other scripts to make it work. See here.

Upvotes: 1

Related Questions