onmouseover Question

Report · Feb 20, 2009

Hello All,

I have been trying to find out a way to do the following:

a) First I am getting a list of values from a database, looping over the query and displaying them, as below:
<cfquery datasource="ows" name="getFilms">
SELECT MOVIETITLE, PITCHTEXT, SUMMARY FROM FILMS
</cfquery>

<cfoutput>
<cfloop query="getFilms">
<table>
<tr>
<td title="<cfoutput>#PITCHTEXT#</cfoutput>">#MOVIETITLE#</td>
</tr>
</table>
</cfloop>
</cfoutput>

b) Second I was trying to show up a small box on moving the mouse over the movie title. The small box should display the value of PITCHTEXT related to that movie. I could do that with simple alert or with the title attribute. How can this be done by opening a small pop up box? Can this be done just with JavaScript or should I be using something else like AJAX?

It would be great if somebody can provide any hints on this.

Thanks.

Report · Feb 21, 2009

Google "javascript tool tips". That will get you started.

Bearing in mind that ajax is basically an extension of javascript, you might want to base your decision on how much data you are talking about. You could bring your titles and pitchtext columns into js arrays and use them on the client. However, if there are thousands of rows, it will be slow, in which case ajax would be a better idea.

As an aside, your output code is inefficient and will probably crash if you run it.

Report · Feb 22, 2009

ColdFusion 8 includes a ToolTip tag, so you could do this:

<cfoutput query="getFilms">
<table>
<tr>
<td>
<cftooltip tooltip="#pichtext#">
#MOVIETITLE#
</cftooltip>
</td>
</tr>
</table>
</cfoutput>

There's no shortage of external JavaScript tooltip functions out there. Here's one of the more interesting ones:
http://www.hotajax.org/mootools/tooltips--rating/565-tooltipmootools.html