Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3441
  • Last Modified:

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

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
larksys
Asked:
larksys
  • 9
  • 5
1 Solution
 
msfletchCommented:
I am not sure I understand the question. Where are the "tthint" values coming from if not the ColdFusion database query?
0
 
larksysAuthor Commented:
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
 
larksysAuthor Commented:
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
Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

 
gdemariaCommented:
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
 
larksysAuthor Commented:
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
 
larksysAuthor Commented:
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
 
larksysAuthor Commented:
I guess I can live with it, but the cfsavecontent looked very inviting.
0
 
gdemariaCommented:
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
 
larksysAuthor Commented:
Do you have an example?
0
 
gdemariaCommented:

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
 
larksysAuthor Commented:
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
 
gdemariaCommented:
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
 
larksysAuthor Commented:
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
 
gdemariaCommented:
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
 
larksysAuthor Commented:
That makes sense to me. Now I have a very dynamic, very clean tooltip. Thanks very much. You're a godsend.
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

  • 9
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now