Solved

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

Posted on 2008-06-25
15
3,429 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
 
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

The technique is by far very Simple! How we can export the ColdFusion query results to DOC file?  Well before writing this I researched a lot in Internet but did not found a good Answer anyways!  So i thought now i should share my small snippet w…
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 …
A company’s greatest vulnerability is their email. CEO fraud, ransomware and spear phishing attacks are the no1 threat to a company’s security. Cybercrime is responsible for the largest loss of money to companies today with losses projected to r…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

929 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now