qTip2 wrong offset onrender

qTip is displaced because icomoon icons are not rendered before.

by omegak

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">
<div class="center">
    <button id="button">Show</button>
</div>

<div id="content">
    <span class="field-box">
        <i class="icon-phone"></i>
    </span>
    <span class="field-box">
        <i class="icon-mail"></i>
    </span>
    <span class="field-box">
        <i class="icon-file-pdf"></i>
    </span>
    <span class="field-box">
        <i class="icon-time"></i>
    </span>
    <span class="field-box">
        <i class="icon-location"></i>
    </span>
</div>

CSS

#button {
    margin-top: 100px;
    width: 100%
}
#content {
    display: none;
}
.center {
    margin-left: auto;
    margin-right: auto;
    width: 10%;    
}
.field-box {
    display: inline-block;
    background: white;
    border: 1px solid #DDD;
    padding: 5px;
    font-size: 3em;
}
@font-face {
    font-family: 'icomoon-ultimate';
    src:url('http://indico.cern.ch/fonts/icomoon.eot');
    src:url('http://indico.cern.ch/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('http://indico.cern.ch/fonts/icomoon.svg#icomoon-ultimate') format('svg'),
        url('http://indico.cern.ch/fonts/icomoon.woff') format('woff'),
        url('http://indico.cern.ch/fonts/icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
    font-family: 'icomoon-ultimate';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'icomoon-ultimate';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.inactive[class^="icon-"]:before, .inactive[class*=" icon-"]:before {
    opacity: 0.15;
}

.icon-phone:before {
    content: "\70";
}
.icon-mail:before {
    content: "\6d";
}
.icon-file-pdf:before {
    content: "\61";
}
.icon-time:before {
    content: "\74";
}
.icon-location:before {
    content: "\6c";
}

JavaScript

$('#button').click(function (e) {
    e.preventDefault();
}).qtip({
    content: $("#content"),
    position: {
        my: 'bottom right',
        at: 'top center'
    },
    show: {
        event: "click"
    },
    hide: {
        event: "unfocus click"
    }
});