Image Tagging

HTML

<script src="http://www.timseverien.nl/taggd/js/jquery.taggd.js"></script>
<link rel="stylesheet" href="http://www.timseverien.nl/taggd/css/taggd.css">
<img class="taggd" src="https://www.google.ca/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiJ1a_jkIPYAhWd14MKHSgSCKwQjRwIBw&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fnature%2F&psig=AOvVaw02_vIwl0rRZWdpIs9ig5vy&ust=1513121979458065" alt="photo">

JavaScript

var data = [];
var settings = [];

$(window).load(function () {
    getSetup();
    $('.taggd').each(function (i, e) {
        var $e = $(e);

        $e.taggd(settings[i]);
        $e.taggd('items', data[i])
    });
});

function getSetup() {

    data.push([{
        x: 0.512,
        y: 0.33,
        text: 'Huey'
    }, {
        x: 0.548,
        y: 0.33,
        text: 'Dewey'
    }, {
        x: 0.567,
        y: 0.36,
        text: 'Louie'
    }]);

    settings.push({
        align: {
            'y': 'bottom'
        },
        offset: {
            'top': -15
        },

            'handlers': {
            'mouseenter': 'show',
                'mouseleave': 'hide'
        }
    });

}