Solved

dynamic form with mouseover tooltip(javascript) - need dynamic data in the tooltip

Posted on 2008-06-25
15
3,434 Views
Last Modified: 2008-06-26
I have a form with dynamic <td>s like;

Firstname  John       Lastname  Adams    DOB  1701/12/02
                  Tom                          Jefferson         1724/04/28
                  John                         McCain             1947/07/04

When I move the mouse over a name I get a pop up that tells me their phone numbers and (someday) a list of the last 10 conversation I had with them.

I'm using javascript I got from www.ebrueggeman.com and it's clean and simple. But the line of code to use it is;

<cfset tthint = "Now is the time for all good men to come to the aid of their ocuntry.<br> This should be the next line." />

<td style="width:100" ><a href="#request.controlPath#individuals/index.cfm?fa=viewindiv&indivnum=#QSpecInfoIndiv.id#" target="_blank" onMouseOver="return tooltip('#tthint#','', 'width:200, border:1, fontsize:10, titlefontsize:16, bordercolor:##FF0000, textcolor:##FF0000');" onmouseout="return hideTip();">#QSpecInfoIndiv.FirstName# #QSpecInfoIndiv.LastName# #QSpecInfoIndiv.DOB#</a>

I've hard coded tthint to test the use of <br> embedded and that works fine. I just don't know how to dynamically load tthint on the fly.


Another version of my test is;

<a href="#request.controlPath#individuals/index.cfm?fa=viewindiv&indivnum=#QSpecExInfoIndiv.id#" target="_blank" onMouseOver="return tooltip('Home -#formatphonenumber(QSpecExInfoIndiv.home_area_code & QSpecExInfoIndiv.home_phone)#','', 'width:200, border:5, fontsize:16, titlefontsize:16, bordercolor:##FF0000, textcolor:##FF0000');" onmouseout="return hideTip();"><font color="green">#QSpecExInfoIndiv.FirstName# #QSpecExInfoIndiv.LastName#</font></a>

Where I embed The home area code and phone number in the text. That data is already available in the query and is static information.

If I were versed in javascript I could create a function to gather data from the database but that's beyond me.

Any thoughts
0
Comment
Question by:larksys
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 5
15 Comments
 
LVL 4

Expert Comment

by:msfletch
ID: 21871909
I am not sure I understand the question. Where are the "tthint" values coming from if not the ColdFusion database query?
0
 
LVL 1

Author Comment

by:larksys
ID: 21874537
The initial query to build the form has the name and phone number info. I need to run a second query to get a list of conversation notes.
0
 
LVL 1

Author Comment

by:larksys
ID: 21874706
Here is the actual code. I can provide the url if needed. I didn't mean to be cagey. I just didn't want to clutter the issue.
<cfinvoke component="companycfc.basic" method="QGetSpecialtiesIndividuals" CompanyNum="#companynum#" Specialty="#QGetSpecialties.SpecialtyID#" returnvariable="QSpecInfoIndiv" />
 
<cfoutput>
    <div class="PanelTab" tabindex="0" style="width:130px" align="center"><a href="#request.controlPath#companies/index.cfm?fa=viewSSflow&companynum=#companynum#&specialty=#QGetSpecialties.SpecialtyID#&Stitle=#QGetSpecialties.Title#" target="_blank">#QGetSpecialties.Title#</a></div>
    <div class="PanelContent">
        <cfif #QSpecInfoIndiv.recordcount# eq 0>
            <table width="100%" align="center" cellspacing="0">
                <tr align="center" >
                    <td>&nbsp;</td>
                </tr>
            </table>
            <cfelse>
            <cfloop query="QSpecInfoIndiv">
                <table width="100%" align="center" cellspacing="0">
                    <tr align="center" >
                        <td style="width:100" <cfif #QSpecInfoIndiv.Unknown_Status# neq "False"> bgcolor="##FFFF33" </cfif>><a href="#request.controlPath#individuals/index.cfm?fa=viewindiv&indivnum=#QSpecInfoIndiv.id#" target="_blank" onMouseOver="return tooltip('Home -#formatphonenumber(QSpecExInfoIndiv.home_area_code & QSpecExInfoIndiv.home_phone)#','', 'width:200, border:5, fontsize:16, titlefontsize:16, bordercolor:##FF0000, textcolor:##FF0000');" onmouseout="return hideTip();">#QSpecInfoIndiv.FirstName# #QSpecInfoIndiv.LastName#</a>
                            <cfif #QSpecInfoIndiv.Off_Limits_Flag#>
                                <font color="crimson">Off Limits</font>
                            </cfif>
                        </td>
                    </tr>
                        <tr align="center">
                            <td style="width:100">#QSpecInfoIndiv.sstitle#</td>
                        </tr>
                    <tr align="center">
                        <td style="width:100">#QSpecInfoIndiv.UTitle#</td>
                    </tr>
 
---------------------------------------------------------------------
 
I would like to eliminate the following code from the initial form and put it in the mouse-over popup
---------------------------------------------------------------------
 
 
                    <tr align="center">
                        <cfquery name="qcomm" datasource="#request.dsn#" dbtype="ODBC">
			SELECT top(1) comment,date_entered
      FROM users_communications
      WHERE users_id = #QSpecInfoIndiv.id# and Communication_Type='T'
      Order by date_entered DESC
		</cfquery>
                        <cfif #Qcomm.recordcount# gt 0>
                            <td style="width:100; color:0033CC;">TT-#Qcomm.Date_Entered#-#left(Qcomm.Comment,10)#</td>
                        </cfif>
                    </tr>
                    <cfquery name="qPlaced" datasource="#request.dsn#" dbtype="ODBC">
			SELECT *
      FROM client_searches_individuals as csi left join
      client_searches as cs on csi.search_number = cs.id 
      WHERE individual_number = #QSpecInfoIndiv.id#
      
		</cfquery>
                    <cfloop query="qPlaced">
                        <tr align="center">
                            <cfif #qPlaced.date_of_resume# neq "">
                                <cfset #qPlaced.Placement_Status# = "R" />
                                <cfset DisplayStatus = "Resume" />
                                <cfset DisplayDate = "#qPlaced.Date_Of_Resume#" />
                            </cfif>
                            <cfif #qPlaced.date_telephoned# neq "">
                                <cfset #qPlaced.Placement_Status# = "T" />
                                <cfset DisplayStatus = "Telephone" />
                                <cfset DisplayDate = "#qPlaced.Date_Telephoned#" />
                            </cfif>
                            <cfif #qPlaced.date_of_face_to_face# neq "">
                                <cfset #qPlaced.Placement_Status# = "F" />
                                <cfset DisplayStatus = "Face To Face" />
                                <cfset DisplayDate = "#qPlaced.Date_Of_Face_To_Face#" />
                            </cfif>
                            <cfif #qPlaced.date_of_placement# neq "">
                                <cfset #qPlaced.Placement_Status# = "P" />
                                <cfset DisplayStatus = "Placed" />
                                <cfset DisplayDate = "#qPlaced.Date_Accepted#" />
                            </cfif>
                            <cfif #qPlaced.date_of_placement# neq "" and #qPlaced.candidate_placed_number# neq #qPlaced.individual_number#>
                                <cfset #qPlaced.Placement_Status# = "G" />
                                <cfset DisplayStatus = "Gone" />
                                <cfset DisplayDate = "-" />
                            </cfif>
                            <cfif #qPlaced.current_status_flag# eq "P" or #qPlaced.current_status_flag# eq "G">
                                <td style="width:100; color:0033CC; background-color:##FF00FF">#DisplayStatus#-#DisplayDate# </td>
                                <cfelse>
                                <td style="width:100; color:0033CC; background-color:##FFCCFF">#DisplayStatus#-#DisplayDate# </td>
                            </cfif>
                        </tr>
                    </cfloop>
                </table>
            </cfloop>
        </cfif>

Open in new window

0
Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

 
LVL 39

Expert Comment

by:gdemaria
ID: 21876507
I'm having some trouble understaning the problem, seems like you are on target.

On this line..

onMouseOver="return tooltip('Home -#formatphonenumber(QSpecExInfoIndiv.home_area_code & QSpecExInfoIndiv.home_phone)#','', 'width:200, border:5, fontsize:16, titlefontsize:16, bordercolor:##FF0000, textcolor:##FF0000');

You are dynamically populating.  

If you want more info in there, you could build up a variable and use it..

<cfset theHint = "Home -#formatphonenumber(QSpecExInfoIndiv.home_area_code & QSpecExInfoIndiv.home_phone)# <br> More lines of code <br> More lines, etc.">

You could also use cfsavecontent to add a bunch of HTML
<CFsavecontent variable="theHint">
  <table>
   <tr>
     <td>Hello World</td>
   </tr>
  </table>
</cfsavecontent>

If that doesn't address the issue, can you elaborate on the trouble you're having?
0
 
LVL 1

Author Comment

by:larksys
ID: 21877130
The following code doesn't even give me a pop up;


<cfsavecontent variable="ExtraInfo">
                    <table>
                    <tr>
                    <td>Home Phone - #formatphonenumber(QSpecInfoIndiv.home_area_code & QSpecInfoIndiv.home_phone)#</td>
                    </tr>
                    <tr>
                    <td>Work Phone - #formatphonenumber(QSpecInfoIndiv.work_area_code & QSpecInfoIndiv.work_phone)#</td>
                    </tr>
                    </table>
                    </cfsavecontent>
                        <td style="width:100" <cfif #QSpecInfoIndiv.Unknown_Status# neq "False"> bgcolor="##FFFF33" </cfif>><a href="#request.controlPath#individuals/index.cfm?fa=viewindiv&indivnum=#QSpecInfoIndiv.id#" target="_blank" onMouseOver="return tooltip('#extrainfo#','', 'width:200, border:1, fontsize:10, titlefontsize:16, bordercolor:##FF0000, textcolor:##FF0000');" onmouseout="return hideTip();">#QSpecInfoIndiv.FirstName# #QSpecInfoIndiv.LastName#</a>

Open in new window

0
 
LVL 1

Author Comment

by:larksys
ID: 21877146
But, this code does;
<cfset ExtraInfo = "Home Phone - #formatphonenumber(QSpecInfoIndiv.home_area_code & QSpecInfoIndiv.home_phone)#  <br> Work Phone - #formatphonenumber(QSpecInfoIndiv.work_area_code & QSpecInfoIndiv.work_phone)# <br><br>" />
                    <cfquery name="qcomm" datasource="#request.dsn#" dbtype="ODBC">
			SELECT top(1) comment,date_entered
      FROM users_communications
      WHERE users_id = #QSpecInfoIndiv.id# and Communication_Type='T'
      Order by date_entered DESC
		</cfquery>
                        <cfloop query = "Qcomm" >
                           <cfset ExtraInfo = "#ExtraInfo#" & "TT-#Qcomm.Date_Entered#-#trim(Qcomm.Comment)# <br>" />
                        </cfloop> 
                        <td style="width:100" <cfif #QSpecInfoIndiv.Unknown_Status# neq "False"> bgcolor="##FFFF33" </cfif>><a href="#request.controlPath#individuals/index.cfm?fa=viewindiv&indivnum=#QSpecInfoIndiv.id#" target="_blank" onMouseOver="return tooltip('#extrainfo#','', 'width:400, border:1, fontsize:10, titlefontsize:16, bordercolor:##FF0000, textcolor:##FF0000');" onmouseout="return hideTip();">#QSpecInfoIndiv.FirstName# #QSpecInfoIndiv.LastName#</a>
                            <cfif #QSpecInfoIndiv.Off_Limits_Flag#>
                                <font color="crimson">Off Limits</font>
                            </cfif>
                        </td>

Open in new window

0
 
LVL 1

Author Comment

by:larksys
ID: 21877149
I guess I can live with it, but the cfsavecontent looked very inviting.
0
 
LVL 39

Expert Comment

by:gdemaria
ID: 21877401
I guess it depends on the capabilities of the tooltip tool you are using.

I'm using the coldfusion 8 built in  tooltip and it can take HTML and images and such without a problem...

0
 
LVL 1

Author Comment

by:larksys
ID: 21877458
Do you have an example?
0
 
LVL 39

Expert Comment

by:gdemaria
ID: 21877552

In this case, if you mouse over a link to a particular report, it will show you a tooltip that includes a thumbnail image of the report and a brief description.  The tool tip is formatted in an html table with an image and then referenced below by surrounding the link with cftooltip.   I changed the autodismissDelay to keep the tool tip around longer ..

   <cfsavecontent variable="theTip">
     <table width="200" cellspacing="3" cellspacing="2">
      <caption>#getReports.reportTitle#</caption>
      <tr><td align="center">
       <img border="1" src="/images/#getReports.thumbnailImage#">
      </td></tr>
     <cfif len(getReports.reportDescription)>
     <tr>
      <td style="font-size:12px;">
       &nbsp; #getReports.reportDescription#
      </td>
     </tr>
     </cfif>
    </table>
  </cfsavecontent>
 
 
<cftooltip autoDismissDelay="12000" tooltip="#theTip#">
  <a href="#getReports.Url#" style="text-decoration:none !important;">#ucase(getReports.reportTitle)#</a>
</cftooltip>

Open in new window

0
 
LVL 1

Author Comment

by:larksys
ID: 21878316
I'm sure it's something I just don't get, but the following code doesn't give me a pop-up.
<cfinclude template="dsptooltips.cfm">
    <cftooltip autoDismissDelay="12000" tooltip="#ExtraInfo#">
     <td style="width:100" <cfif #QSpecInfoIndiv.Unknown_Status# neq "False"> bgcolor="##FFFF33" </cfif>><a href="#request.controlPath#individuals/index.cfm?fa=viewindiv&indivnum=#QSpecInfoIndiv.id#" target="_blank">#QSpecInfoIndiv.FirstName# #QSpecInfoIndiv.LastName#</a>
       <cfif #QSpecInfoIndiv.Off_Limits_Flag#>
         <font color="crimson">Off Limits</font>
       </cfif>
     </td>
   </cftooltip>
 
--------------------------------------------------------------------
dspTooltips.cfm;
--------------------------------------------------------------------
 
 
<cfsavecontent variable="ExtraInfo">
                    <table>
                    <tr>                    
                        <td>Home Phone - #formatphonenumber(QSpecInfoIndiv.home_area_code & QSpecInfoIndiv.home_phone)#</td>
                        <td>Work Phone - #formatphonenumber(QSpecInfoIndiv.work_area_code & QSpecInfoIndiv.work_phone)#</td>
                        <td>&nbsp;</td>
                        <cfquery name="qcomm" datasource="#request.dsn#" dbtype="ODBC">
			SELECT top(5) comment,date_entered
      FROM users_communications
      WHERE users_id = #QSpecInfoIndiv.id# and Communication_Type='T'
      Order by date_entered DESC
		</cfquery>
                        <cfloop query = "Qcomm" >
                            <td>TT-#Qcomm.Date_Entered#-#trim(Qcomm.Comment)#</td>
                        </cfloop>
                        <cfquery name="qPlaced" datasource="#request.dsn#" dbtype="ODBC">
			SELECT *
      FROM client_searches_individuals as csi left join
      client_searches as cs on csi.search_number = cs.id 
      WHERE individual_number = #QSpecInfoIndiv.id#
      
		</cfquery>
                        <cfloop query="qPlaced">
                            <cfif #qPlaced.date_of_resume# neq "">
                                <cfset #qPlaced.Placement_Status# = "R" />
                                <cfset DisplayStatus = "Resume" />
                                <cfset DisplayDate = "#qPlaced.Date_Of_Resume#" />
                            </cfif>
                            <cfif #qPlaced.date_telephoned# neq "">
                                <cfset #qPlaced.Placement_Status# = "T" />
                                <cfset DisplayStatus = "Telephone" />
                                <cfset DisplayDate = "#qPlaced.Date_Telephoned#" />
                            </cfif>
                            <cfif #qPlaced.date_of_face_to_face# neq "">
                                <cfset #qPlaced.Placement_Status# = "F" />
                                <cfset DisplayStatus = "Face To Face" />
                                <cfset DisplayDate = "#qPlaced.Date_Of_Face_To_Face#" />
                            </cfif>
                            <cfif #qPlaced.date_of_placement# neq "">
                                <cfset #qPlaced.Placement_Status# = "P" />
                                <cfset DisplayStatus = "Placed" />
                                <cfset DisplayDate = "#qPlaced.Date_Accepted#" />
                            </cfif>
                            <cfif #qPlaced.date_of_placement# neq "" and #qPlaced.candidate_placed_number# neq #qPlaced.individual_number#>
                                <cfset #qPlaced.Placement_Status# = "G" />
                                <cfset DisplayStatus = "Gone" />
                                <cfset DisplayDate = "-" />
                            </cfif>
                            
                            <cfif #qPlaced.current_status_flag# eq "P" or #qPlaced.current_status_flag# eq "G">
                                <td style="color:0033CC; background-color:##FF00FF">#DisplayStatus#-#DisplayDate# </td>
                                <cfelse>
                                <td style="color:0033CC; background-color:##FFCCFF">#DisplayStatus#-#DisplayDate# </td>
                            </cfif>
                        </cfloop>
                        </tr>
                        </table>
                        </cfsavecontent>

Open in new window

0
 
LVL 39

Expert Comment

by:gdemaria
ID: 21878382
Perhaps you can't wrap a tooltip around a table cell <td>
Try moving the tip inside the cell, you can place the "Off Limits" text inside a div if you want it to trigger more space than just the text...

0
 
LVL 1

Author Comment

by:larksys
ID: 21878684
You're right. But I can't get the "off limits" to display. I don't understand the div.
<cfinclude template="dsptooltips.cfm">
  <td style="width:100" <cfif #QSpecInfoIndiv.Unknown_Status# neq "False"> bgcolor="##FFFF33" </cfif>>
<cftooltip autoDismissDelay="12000" tooltip="#ExtraInfo#">
 <a href="#request.controlPath#individuals/index.cfm?fa=viewindiv&indivnum=#QSpecInfoIndiv.id#" target="_blank">#QSpecInfoIndiv.FirstName# #QSpecInfoIndiv.LastName# </a> 
</cftooltip>
     <div>
       <cfif #QSpecInfoIndiv.Off_Limits_Flag#>
          <font color="crimson">Off Limits</font>
       </cfif>
     </div>
</td>

Open in new window

0
 
LVL 39

Accepted Solution

by:
gdemaria earned 500 total points
ID: 21878934
below are two snippets... the first one should show a tip when the user mouses over anywhere in the table cell,  the second should show tip only if mousing over the link.   Wasn't sure which one you wanted..

  <cfinclude template="dsptooltips.cfm">
  <td style="width:100" <cfif #QSpecInfoIndiv.Unknown_Status# neq "False"> bgcolor="##FFFF33" </cfif>>
       <cftooltip autoDismissDelay="12000" tooltip="#ExtraInfo#">
       <div style="width:100%">
       <a href="#request.controlPath#individuals/index.cfm?fa=viewindiv&indivnum=#QSpecInfoIndiv.id#" target="_blank">#QSpecInfoIndiv.FirstName# #QSpecInfoIndiv.LastName#</a>
       <cfif #QSpecInfoIndiv.Off_Limits_Flag#>
         <font color="crimson">Off Limits</font>
       </cfif>
       </div>
       </cftooltip>
   </td>
 
  <cfinclude template="dsptooltips.cfm">
  <td style="width:100" <cfif #QSpecInfoIndiv.Unknown_Status# neq "False"> bgcolor="##FFFF33" </cfif>>
       <cftooltip autoDismissDelay="12000" tooltip="#ExtraInfo#">
       <a href="#request.controlPath#individuals/index.cfm?fa=viewindiv&indivnum=#QSpecInfoIndiv.id#" target="_blank">#QSpecInfoIndiv.FirstName# #QSpecInfoIndiv.LastName#</a>
       </cftooltip>
       <cfif #QSpecInfoIndiv.Off_Limits_Flag#>
         <font color="crimson">Off Limits</font>
       </cfif>
   </td>

Open in new window

0
 
LVL 1

Author Comment

by:larksys
ID: 21879670
That makes sense to me. Now I have a very dynamic, very clean tooltip. Thanks very much. You're a godsend.
0

Featured Post

Major Incident Management Communications

Major incidents and IT service outages cost companies millions. Often the solution to minimizing damage is automated communication. Find out more in our Major Incident Management Communications infographic.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article  is about submitting  form through  ColdFusion.Ajax.submitForm to the action page and send a response back in JSON format which later can be decoded using ColdFusion.JSON.decode. By this way you can avoid the usual page refresh for subm…
Today, I was working on some optimization and spam-stopping techniques when I encountered Ben Nadel's post to reduce spam feature using Math (http://www.bennadel.com/blog/197-How-I-Stop-Spammers-On-My-ColdFusion-Blog.htm). While this method is not o…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question