Solved

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

Posted on 2008-06-25
15
3,431 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
  • 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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

Suggested Solutions

Title # Comments Views Activity
CFC Lookup - When Not Found 5 75
Having an issue with NumberFormat 7 61
Coldfusion subreport - passing parameters 2 80
Problem with data displaying 2 28
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 …
CFGRID Custom Functionality Series -  Part 1 Hi Guys, I was once asked how it is possible to to add a hyperlink in the cfgrid and open the window to show the data. Now this is quite simple, I have to use the EXT JS library for this and I achiev…
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…

856 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