Get YG tooltips displaying on your site now!
Step 1:<script src="http://static.yg.com/js/exsyndication.js" type="text/javascript"></script>For blogs, forums, and guild sites this is best placed in the index, header, footer, or any additional page that gets included throughout your site. | Step 2: |
Samples:
Item: Blizzard Gloves
<a href="http://ffxi.yg.com/de/item/blizzard-gloves?id=14990">Blizzard Gloves</a>
How to customize the Final Fantasy XI YG tooltip.
Adding one or more custom "class" to an anchor tag is the key to customizing the tooltips.TIP: An anchor tag is the HTML link code and a class is an attribute you can add to the tag. Here is an example of a simple anchor tag with two custom class attributes. The first one is shown in italics while the second is underlined.
<a class="first-class second-class" href="http://ffxi.yg.com/de">Final Fantasy XI Database</a>
Custom class values that you can use:
"yg-name" - Text will look-up the object name: Unknown item
<a class="yg-name" href="http://ffxi.yg.com/de/item/eerie-cloak?id=11300">Unknown item</a>
"yg-iconsmall" - Include the small icon: Commodore Belt
<a class="yg-iconsmall" href="http://ffxi.yg.com/de/item/dragon-slayer?id=17733">Commodore Belt</a>
"yg-iconmedium" - Include the medium icon: Commodore Belt
<a class="yg-iconmedium" href="http://ffxi.yg.com/de/item/commodore-belt?id=15920">Commodore Belt</a>
"yg-notext" - Does not include any text. Can only use with yg-iconsmall or yg-iconmedium. Examples shown below.
Examples of using more than one class value:
"yg-iconsmall yg-notext" - display the small icon with no text: Darksteel Axe
<a class="yg-iconsmall yg-notext" href="http://ffxi.yg.com/de/item/darksteel-axe?id=16645">Darksteel Axe</a>
"yg-iconmedium yg-notext" - display the medium icon with no text: Darksteel Axe
<a class="yg-iconmedium yg-notext" href="http://ffxi.yg.com/de/item/darksteel-axe?id=16645">Darksteel Axe</a>
Advanced Tooltip Syndication:
The following syndication features have been added to help make the integration of tool-tips into existing platforms easy and customizable.
How to use the advanced tooltip syndication.
Simply add the following JS parameters below the <script src="http://static.yg.com/js/exsyndication.js" type="text/javascript"></script> line in your HTML code. You can use any combination of the following parameters to tweak how our tooltips display and get integrated into your site.
removeClasses - Used to remove pre-existing CSS classes that may automatically get added to anchor tags by your CMS or platform. An example of this is external links found in MediaWiki default to having a 'extern' CSS class added to them which sets a style that conflicts with our icons. The parameter accepts an array of strings for classes which you may want disabled when using our tooltips.
defaultClass - This option lets you set the default YG class options for all links to our site. If you always want to have small icons next to our links you can simply set it here instead of having to add in the 'yg-iconsmall' class to every anchor tag. This is a very useful option for forum admins who do not want to create custom BBCode rules.
clearTitle - If this parameter is set to true it will remove the title attribute from anchor tags that some content systems, such as MediaWiki, automatically add. This allows you to remove the title overlay so it doesn't interfere with the hovering tooltip our script adds.
Note: These parameter rules only apply to the links to our site where we add tool-tips and will not interfere with any other links found on your page.
Add tooltips to dynamic links
If you are generating links dynamically (from Ajax or JavaScript) and want to add tooltips to the links you generate, just call the function specified below after you have generated the links and appended them somewhere in your page. The function will automatically add tooltips to the newly added links.
How to use the advanced tooltip syndication.
Simply add the following JS parameters below the <script src="http://static.yg.com/js/exsyndication.js" type="text/javascript"></script> line in your HTML code. You can use any combination of the following parameters to tweak how our tooltips display and get integrated into your site.
<script type="text/javascript">
YG.UserSettings.Syndication =
{
removeClasses: ['extern'],
defaultClass: 'yg-iconsmall yg-notext',
clearTitle: true
}
</script>
removeClasses - Used to remove pre-existing CSS classes that may automatically get added to anchor tags by your CMS or platform. An example of this is external links found in MediaWiki default to having a 'extern' CSS class added to them which sets a style that conflicts with our icons. The parameter accepts an array of strings for classes which you may want disabled when using our tooltips.
defaultClass - This option lets you set the default YG class options for all links to our site. If you always want to have small icons next to our links you can simply set it here instead of having to add in the 'yg-iconsmall' class to every anchor tag. This is a very useful option for forum admins who do not want to create custom BBCode rules.
clearTitle - If this parameter is set to true it will remove the title attribute from anchor tags that some content systems, such as MediaWiki, automatically add. This allows you to remove the title overlay so it doesn't interfere with the hovering tooltip our script adds.
Note: These parameter rules only apply to the links to our site where we add tool-tips and will not interfere with any other links found on your page.
Add tooltips to dynamic links
If you are generating links dynamically (from Ajax or JavaScript) and want to add tooltips to the links you generate, just call the function specified below after you have generated the links and appended them somewhere in your page. The function will automatically add tooltips to the newly added links.
YG.Syndication.Regen();