My working code:
$("#selectResult").append("<div id='"+arr[this.id]+"' class='inline'
title='Co. "+arr[this.id]+"'></div>");
$("#"+arr[this.id]).css({'background-image' : 'url(./img/coatofarms/'
+arr[this.id]+'.png)','background-repeat': 'no-repeat','background-position':
'bottom'}).qtip(countyCrest);
In the first select where I append the div I give the title and when I inspect the element the title is as it should be.
Then when I change the .css in the second select for the div, on inspect element title is now oldtitle="Co. Down" title=""
What is going on here?
This is the inspect element code
<div id="Antrim" class="inline" style="background-image:
url(http://danu2.it.nuigalway.ie/09101916/trazoo/demo_1/img/coatofarms/Antrim.png);
background-position: 50% 100%; background-repeat: no-repeat no-repeat; "
oldtitle="Co. Antrim" title=""></div>
qTip empties the title attribute so that you don't see the qTip balloon and the default browser tooltip at the same time. The original title is stored in the oldtitle attribute.
More specifically:
Unfortunately the title attribute has to be removed so that the default browser tooltip is supressed. Even for those elements not grabbing content from the title attribute itself, it needs to be removed, or in the case of qTip, renamed, so that we don't get two tooltips showing up!