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: