Wiki

Preparation

tooltips are also using dbc and db2 files - their representation in MySQL. See CatArmory Instalation

PHP

configure configs/config.php

JavaScript / HTML

configure configs/config.js and add:

#!javascript
<script type="text/javascript" src="http://url/to/configs/config.js"></script>
<script type="text/javascript" src="http://url/to/js/tooltip.js"></script>

to header of your page. Then add:

#!javascript

<script type="text/javascript">
$(document).ready(function() {
  $('.tooltips').tooltip();
});
</script>

#!html

<div class="tooltips" data-type="item" data-entry="item_entry">item tooltip</div>
<div class="tooltips" data-type="spell" data-entry="spell_entry">spell tooltip</div>
<div class="tooltips" data-type="character" data-entry="char_guid">character tooltip</div>
<div class="tooltips" data-type="character" data-name="char_name">character tooltip</div>
<div class="tooltips" data-type="guild" data-entry="guild_id">guild tooltip</div>
<div class="tooltips" data-type="guild" data-name="guild_name">guild tooltip</div>
<div class="tooltips" data-type="team" data-guid="arenateam_id">arenateam tooltip</div>
<div class="tooltips" data-type="team" data-name="arenateam_name">arenateam tooltip</div>
<div class="tooltips" data-type="npc" data-entry="npc_entry">npc tooltip</div>

Few more words

Now anything on page with class="tooltips" will be tooltiped (like wowhead) and tooltip is showed on mouseover event. When triggered, it will read "data-type" and decide what is being tooltiped (spell, item, ...). Next it reads "data-entry" or "data-guid" attribute of invoker, checks for already cached data and when none are found - it makes ajax request to ajax-tooltip.php. CatArmory is using data-guid instead of data-entry for items and characters - as it is getting them right from trinity_characters database. So it is able to display enchants, gems, etc. on specific items and character details. If you/your page know item guids, you can use them either. You can also pipe tooltip content (only works with data-entry) to jQuery element:

#!javascript

$divElement = $('<div></div>');
$divElement.attr('data-entry',12345);
$divElement.showHTML();