Database Tools Syndication Tooltips

This guide is a walkthrough of how to link items, ribbons, and collections on your website, with built-in tooltips. What is a tooltip? A tooltip will display item facts in a little box that pops up in your browser. Clicking on the link will direct users to a page with more detailed information. Just follow this easy guide to getting these on your site.

Tooltip Syndication

Syndicating tooltips is simple. Follow this two-step process, and you're done.

1. Put the following code into the HEAD section of the HTML document:

<script type="text/javascript" src="http://farmbook.fbplayers.com/js/farmville-exsyndication.js"></script>

2. Your site is now ready for tooltip syndication! Whenever you want to include a tooltip in a news story, comment, or forum post, all you need to do is create a farmvillefb link to the item. Here's are some examples:

Item: Apple Tree

<a href="http://farmbook.fbplayers.com/item/742">Apple Tree</a>

Achievement: Animal Shelter

<a href="http://farmbook.fbplayers.com/achievement/10">Animal Shelter</a>

Collection: Bugs Collection

<a href="http://farmbook.fbplayers.com/collection/1286">Bugs Collection</a>

Customizing Tooltip Links

Links can be customized by applying a "class" attribute to the anchor tag. Here are some of the options we currently offer.

Links with Icons

To include an icon with your link, as well as the label, use one of the following three class attributes: "farmville<type>-full-small" for a small icon, "farmville-<type>-full-medium" for a medium icon, or "farmville-<type>-full-large" for a large icon.

Items Class attribute farmville-item-full-small will display: Apple Tree Class attribute farmville-item-full-medium will display: Apple Tree Class attribute farmville-item-full-large will display: Apple Tree

Ribbons Class attribute farmville-ribbon-full-small will display: Animal Shelter Class attribute farmville-ribbon-full-medium will display: Animal Shelter Class attribute farmville-ribbon-full-large will display: Animal Shelter

Icon-Only Links

To include an icon-only link, use one of the following three class attributes: "farmville-<type>-icon-small" for a small icon, "farmville-<type>-icon-medium" for a medium icon, or "farmville-<type>-icon-large" for a large icon.

Items Class attribute farmville-item-icon-small will display: Class attribute farmville-item-icon-medium will display: Class attribute farmville-item-icon-large will display:

Ribbons Class attribute farmville-ribbon-icon-small will display: Class attribute farmville-ribbon-icon-medium will display: Class attribute farmville-ribbon-icon-large will display: