On Hover Pin It buttons

Show a floating Pin It button over any image.

Updated Decemeber 18th, 2013

Overview

On Hover Pin It buttons work like regular Pin It buttons, but remain invisible until someone mouses over an image on your page.

They look great on pages with lots of images and might look and feel better if your design is on the minimal side.

Note: Be careful about using On Hover Pin It buttons on sites intended for mobile browsers. Since there's no hover interaction on touch screens, On Hover Pin It buttons won't show up.

Activation is easy

To activate On Hover Pin It buttons on your page, just add the data-pin-hover attribute to the SCRIPT tag on your page that calls pinit.js.

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"
    data-pin-hover="true"
></script>

If you're running our asynchronous script loader, add this line to set the data-pin-hover attribute:

    p.setAttribute('data-pin-hover', true);

If you're not already running pinit.js on your page, please visit the Widget Builder to find out more about the Pin It button and the rest of Pinterest's fleet of handy widgets.

Some Images Won't Work

CSS background images, images that are under 80 by 80 pixels in size, images that have the data-pin-no-hover="true" attribute set, images that have the nopin="nopin" attribute set, and images whose src attribute starts with data: won't show hover buttons.