I am kind of new to JavaScript so please excuse me if this is a dumb question.
I am trying to display a different image for each tool tip. JQuery UI has it setup so the text inside is the name of the image.
Check out my code below:
HTML:
<div id="tooltip" class="option-child"><a id="ceramic-pro-rain" title="The Title" data-geo="Rochester" href="#" >• 1 layer of Rain on all windows and glass</a></div>
JavaScript
<script type="text/javascript">
$(function() {
$( document ).tooltip({
//items: "a, [data-geo], [title]",
items: "a",
position: {
my: "left center-29",
at: "right+10 center+18"
},
content: function() {
var element = $( this );
if ( element.is( "[data-geo]" ) ) {
var text = element.text();
return "<img class='map' alt='" + text +
"' src='http://www.sample.com/img/tooltip/" +
text + ".jpg" + "'>";
}
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
if ( element.is( "img" ) ) {
return element.attr( "alt" );
}
}
});
});
As your tooltip selector is items: "a"
then following statement will never execute.
if ( element.is( "img" ) ) {
return element.attr( "alt" );
}
Solution:
If you want to add tooltip to all a
& img
tag with or without [data-geo]
try out following js.
$(document).tooltip({
items: "a,img",
position: {
my: "left center-29",
at: "right+10 center+18"
},
content: function() {
var element = $( this );
if(element.is( "[data-geo]" )){
return '<img class="map" alt="'+ $(this).data('geo') +'" src="http://lorempixel.com/image_output/'+ $(this).data('geo') +'.jpg" />';
}
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
if ( element.is( "img" ) ) {
return element.attr( "alt" );
}
}
});
I have also added html to cover all possible variant.
<div id="tooltip" class="option-child">
<a id="ceramic-pro-rain" title="The Title" data-geo="Rochester" href="#" >• 1 layer of Rain on all windows and glass</a>
<img src="http://lorempixel.com/400/200/sports/" alt="sports image">
</div>
<a id="ceramic-pro-rain" title="The Title" href="#" >• Link without data-geo</a>