Step 1:Adding the scripts and styles

Adding YoTip to your site is simple:

Add this code onto your site:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script src="http://yotip.yolasite.com/resources/yotip/yotip.js"></script>

<link href="http://yotip.yolasite.com/resources/yotip/yotip.css" rel="stylesheet"/> 

Step 2:Declaring elements as YoTip 

To turn a html element into a YoTip, first you have to add this to the element:

rel="yotip"

so, if you are adding YoTip to a link, it will be:

<a href="yourlink" rel="yotip">your link</a>

Also, if you want to YoTip to follow your mouse, turn the 

rel="yotip" 

into

rel="yotipfollow"

Step 3:Adding content to a YoTip

To add the text or things inside the YoTip, use this tag:

data-yotip="your text"

So, for it to say Yay! on a link, use this:

<a href="yourlink" rel="yotip" data-yotip="Yay!">your link</a>

 You could put html elements inside the YoTip as well!

Step 4:End Example 

The full code for a link to show a image inside a YoTip is:

 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://yotip.yolasite.com/resources/yotip/yotip.js"></script>
<link rel="stylesheet" href="http://yotip.yolasite.com/resources/yotip/yotip.css"/>
<a href="your link" rel='"yotip" data-yotip="<img src='image url'/>">your link</a>

Example:

YoTip