How to alter Image w/ description tooltip v2.0

[Lady Rogue]

Script: Image w/ description tooltip v2.0

http://dynamicdrive.com/dynamicindex4/imagetooltip.htm

I was wondering how I would go about changing the scroll over in the above code so that the text is beside the image and not under it.

[Lady Rogue]

Is there no way for this to be done?

[djr33]

From the .js file:

createtip:function($, tipid, tipinfo){
if ($('#'+tipid).length==0){ //if this tooltip doesn't exist yet
return $('<div id="' + tipid + '" class="ddimgtooltip" />').html(
'<div style="text-align:center"><img src="' + tipinfo[0] + '" /></div>'
+ ((tipinfo[1])? '<div style="text-align:left; margin-top:5px">'+tipinfo[1]+'</div>' : '')
)
.css(tipinfo[2] || {})
.appendTo(document.body)
}
return null
},


You would modify that to create a different kind of HTML, probably with some CSS.

Here's one way to start:

createtip:function($, tipid, tipinfo){
if ($('#'+tipid).length==0){ //if this tooltip doesn't exist yet
return $('<div id="' + tipid + '" class="ddimgtooltip" />').html(
'<div class="tipimg"><img src="' + tipinfo[0] + '" /></div>'
+ ((tipinfo[1])? '<div class="tiptext">'+tipinfo[1]+'</div>' : '')
)
.css(tipinfo[2] || {})
.appendTo(document.body)
}
return null
},

Then in your CSS, give the styles you'd like to the classes tipimg and tiptext.
For example, use float:left; for both.