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.