Solved

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

Posted on 2008-06-25
15
3,425 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

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…
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…
This video discusses moving either the default database or any database to a new volume.
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…

747 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