Solved

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

Posted on 2008-06-25
15
3,433 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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
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

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.

Question has a verified solution.

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

Hi. There are several upload tutorials using jquery and coldfusion. I found a very interesting one here Upload Your Files using Jquery & ColdFusion and Preview them (http://www.randhawaworld.com/) . I did keep the main js functions but made sever…
I spent nearly three days trying to figure out how incorporate OAuth in Coldfusion for the Eventful API. Hopefully, this article will allow Coldfusion Programmers to buzz through the API when they need to. Basically, what this script does is authori…
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an antispam), the admini…

685 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