jQuery add pin to image plugin – tooltip photos with jquery.easypin

Check this awesome jQuery add pin to image plugin. It allows to tooltip photos very easy.

jQuery add pin – simply pinning objects in pictures

Simple and fast image pinning plugin. There are dependencies: jQuery 1.8+ and easing plugin. Add valuable information as tooltips on your photos.

jQuery add pin to images
jQuery add pin to images


Load libraries:

<script src="jquery.min.js"></script>
<script src="jquery.easing.min.js"></script>
<script src="jquery.easypin.min.js"></script>

Pin the picture (and define easypin-id attribute):

<img src="example.jpg" class="pin" width="760"
  easypin-id="example_image1" />

Dialog window for pin contents:

<div class="easy-modal" style="display:none;" modal-position="free">
        type something: <input name="content" type="text">
        <input type="button" value="Save pin" class="easy-submit">


<div style="display:none;" width="130" shadow="true" popover>
    <div style="width:100%;text-align:center;">{[content]}</div>

Initialize the pictures:


To access the coordinates after pinning:

var $instance = $('.pin').easypin({
    done: function(element) {
        return true;

// set the 'get.coordinates' event
$instance.easypin.event( "get.coordinates",
   function($instance, data, params ) {
    console.log(data, params);

Then you can run this event with a button click event:

<input class="coords" type="button" value="Get coordinates" />
$( ".coords" ).click(function(e) {
    $instance.easypin.fire( "get.coordinates",
    {param1: 1, param2: 2, param3: 3}, function(data) {
        return JSON.stringify(data);

License: MIT


Demo 1 (responsive)

Demo 2

Demo 3

jQuery add pin plugin homepage:


See also:

iPicture – tooltip your photos

HTML5 tutorial: a photo on the Canvas with clickable elements