jquery ui tooltip - display image for each option
I'm trying to display an image when the user mouses through each item in a select menu. Here is my code:
- <div>
<label for="stationery">Choose A Stationery: </label>
<select id="stationery" name="stationery">
<option id="s_opt_0" value="0">Please Choose</option>
<option id="s_opt_1" value="Plain">Plain</option>
- <option id="s_opt_2" value="Birthday" title="Birthday">Birthday</option>
<option id="12> <a href="http://maps.google.com/maps?q=vienna,+austria&z=11" data-geo="data-geo">Vienna, Austria</a>
</div>
</option>
<option id="s_opt_5" value="Your Own">Upload Your Own:</option>
</select>
</div>
My jquery is as follows:
- $(function() {
$( document ).tooltip({
items: "img, [title]",
content: function() {
var element = $( this );
if ( element.is( "[data-geo]" ) ) {
var text = element.text();
return "<img class='map' alt='" + text +
"' src='http://maps.google.com/maps/api/staticmap?" +
"zoom=11&size=350x350&maptype=terrain&sensor=false¢er=" +
text + "'>";
}
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
if ( element.is( "img" ) ) {
return element.attr( "alt" );
}
}
});
});
I do see the "birthday" tooltip, but cannot get it to display the map. What I actually want is a plain old jpg, or png, but could find nothing online about doing this. Can anyone help?