qTip2 - My test case

by Eric Howe

HTML

<script src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css">
<a class="sharetip" href="http://dummy/share/test-link" aria-describedby="ui-tooltip-0">Share</a>

CSS

body{
    padding: 50px;
}

JavaScript

// Create the tooltips only when document ready
$(document).ready(function() {
    // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
    $('a.sharetip').click(function(event) {
        event.preventDefault();
        $(this).qtip({
            position: {
                my: 'top left',
                at: 'bottom right'
            },
            style: {
                classes: 'ui-tooltip-plain ui-tooltip-shadow ui-tooltip-rounded',
                width: 300
            },
            hide: {
                event: 'unfocus'
            },
            content: {
                title: {
                    text: "Share Link",
                    button: true
                },
                text: '<input type="text" class="small span5 focusselect" value="' + this.href + '" />'
            },
            show: {
                event: 'click',
                ready: true,
                solo: true
            },
            events: {
                show: function(event, api) {
                    var $this = $(this);
                    setTimeout(function() {
                        $this.find('input.focusselect').focus().select();
                    }, 0);
                }
            }
        });
    });
});