Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2008-06-25
15
Medium Priority
?
3,439 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
How to Create Failover DNS Record Sets in Route 53

Route 53 has the ability to easily configure DNS record sets specifically for failover scenarios. These failover record sets can be configured to failover to full-blown deployments in other regions or to a static HTML page that informs your customers of the issue.

 
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 2000 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
This is an updated version of a post made on my blog over 3 years ago. It is unfortunately, still very relevant as we continue to see both SQLi (SQL injection) and XSS (cross site scripting) attacks hitting some of the most recognizable website and …
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …
Have you created a query with information for a calendar? ... and then, abra-cadabra, the calendar is done?! I am going to show you how to make that happen. Visualize your data!  ... really see it To use the code to create a calendar from a q…

688 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