✔ qtip2 Werte aus den Attributen setzen

[Steusi]

Hallo Leute,

ich habe gerade damit angefangen qtip2 (http://craigsworks.com/projects/qtip2/) zu verwenden. Leider arbeite ich normalerweise im Backend und habe meine HTML-Ausgabe in der Datenbank, diese müssen nun nur noch korrekt angezeigt werden.

Ich möchte in einer imagemap für jede area die Werte als Attribute setzen, diese soll JavaScript korrekt verstehen, nur weiß ich nicht wie ich dort ran komme.

Mein Versuch:
JavaScript

$(document).ready(function()
{

var area = $('.office');
		area.removeData('qtip') 
		area.qtip({
				content: {
					attr: 'content-text',
					title: {
						// TODO: fix error
						text: function() {
								return $(this).attr('title-text');
						}			
						//text: area.attr('title-text'),
						button: true
					}
				},
				position: {
					my: area.attr('pos_my'), // Use the corner...
					at: area.attr('pos_at') // ...and opposite corner
				},
				
				style: {
					classes: 'qtip-shadow qtip-bootstrap'
				}
			});			
	
});

Ich möchte von jedem area-Element das Attribut nutzen, dies klappt so aber nicht, da es nur vom ersten Element nimmt. Wie bekomme ich es korrekt hin?
Ich habe es mit einer Funktion versucht, doch dieser Ansatz ist mit meinem Wissen wohl falsch

Meine HTML-Ausgabe:

<map id="_office" name="office">
<?php foreach($this->office as $room): ?>
<area shape="<?php echo $room['typ'] ?>" class="office" coords="<?php echo $room['coords'] ?>" alt="" title=""   
content-text="<?php echo $room['context'] ?>" title-text="<?php echo $room['title-text'] ?>" pos_my="<?php echo $room['pos_my'] ?>" pos_at="<?php echo $room['pos_at'] ?>" />
<?php endforeach; ?>
</map>

<area shape="rect" class="office" coords="6,10,104,242" alt="" title=""   
content-text="Inhalt" title-text="Büro 111" pos_my="left center" pos_at="right center" />

Ich hoffe mir kann jemand helfen.
Freue mich über jeden Tipp!


// edit
Also die Lösung sieht wie folgt aus:

$(document).ready(function(){
	$(function() {
		$('area').each(function() {
			$(this).qtip({
				content: {
						attr: 'content-text',
						title: {
							text: function(api) {
								return $(this).attr("title-text");
							},
							button: true
						}
				},
				position: {
						my: $(this).attr("pos_my"),
						at: $(this).attr("pos_at")
				},
				
				style: {
						classes: 'qtip-shadow qtip-bootstrap'
				}
			});
		});
	});
});