In this tutorial, Cold Fusion CFToolTips – Pushing the Limits, I will be demonstrating the cftooltip tag and what you can do with it. I will show you how you can do more advanced things with the cftooltips and I will be pushing the tag to its limits. I got the idea from one of my favorites CF Gurus, Raymond Camden. But my tooltip is a little bit more advanced as I am pulling all of my data from an xml file. Here is a link to the original article by Raymond that I used to create this tooltip in our companies intranet site. The files I created for this article is a scaled down version of what I implemented in our intranet site. I will also included the demo files used so you can download the files and place them on your Cold Fusion server to see them in action.
<a href=”https://s3.amazonaws.com/hyperdrive.designs.tutorialfiles/cftooltip.zip” class=”btn btn-primary” target=”_blank”>Zipped Demo Source Files</a>
Of course, if you have been reading my previous post, I have to support older versions of IE. So I found this EXCELLENT open source library to support CSS3 in IE called CSS3 Pie. Pie makes Internet Explorer 6 – 9 capable of rendering several of the most useful CSS3 decoration features. This allows my styling of the tooltips, rounded corners, to look good in the older IE browsers. The first section of code is the css styles for the tooltips. These styles are what actual style the tooltip sections. Also I have my IE fix using the CSS3 pie library.
<style type="text/css"><!--
.yui-tt {
color:#000;
font-size:12pt;
background-color:#c6c6c6;
padding: 20px;
padding-bottom: 30px;
width:500px;
border-radius: 10px;
-moz-border-radius: 10px;
behavior: url(pie/PIE.htc);
}
.logos ul {
list-style: none;
}
.logos li {
display: inline;
}
--></style>
Now this section of code is the engine that drives the tooltips to push them to their limit.
First, I find my xml file on my server (your url path will be different) and then parse the file and save it as mydoc variable. Then I create an array to place all my data from my xml file. My data is just a simple xml file with 3 different major league baseball teams with 4 pieces of information(id, team, league, website). I then loop through all the data and set all of the information to their corresponding values within the array. I then use this array to provide my information to the tooltips. ** Please not that I have tried many different syntax plugins and all of them do not seem able to correctly handle the cold fusion language and it injects code. For example, as the end of the code in the syntax box, there are multiple cf closing tags that do not belong there but the plugin injects them in there. be sure to download the tutorial source files for the accurate code.
<!--- This line makes a call to my xml that holds all my data --->
<cffile action="read" file="http://127.0.0.1:8500/cfxml/cftooltip/imageData.xml" variable="myxml">
<!-- Parse and set my data in a variable --->
<cfset mydoc = XmlParse(myxml)>
<!--- run through all my data and set up the array --->
</cfset><cfset numItems = ArrayLen(mydoc.imagesSections.images.XmlChildren)>
</cfset><cfset orderquery = QueryNew("id, name, league, website") >
</cfset><cfset temp = QueryAddRow(orderquery, #numItems#)>
<cfloop index="i" from = "1" to = #numItems#>
<cfset temp = QuerySetCell(orderquery, "id",
#mydoc.imagesSections.images.imagesDetails[i].XmlAttributes.id#,#i#)>
</cfset><cfset temp = QuerySetCell(orderquery, "name",
#mydoc.imagesSections.images.imagesDetails[i].XmlAttributes.name#, #i#)>
</cfset><cfset temp = QuerySetCell(orderquery, "league",
#mydoc.imagesSections.images.imagesDetails[i].XmlAttributes.league#, #i#)>
</cfset><cfset temp = QuerySetCell(orderquery, "website",
#mydoc.imagesSections.images.imagesDetails[i].XmlAttributes.website#, #i#)>
</cfset></cfloop>
<div id="wrapper">
<div class="logos">
<ul>
<!-- info for logo 1 --->
<cfset image_path = "images/bRedsoxLogoLarge.png" >
<cfimage name="large_preview" source="#image_path#">
<cfset imageScaleToFit(large_preview,400,400,'bicubic')>
<cfsavecontent variable="tooltip_image1">
<cfimage source="#large_preview#" action="writeToBrowser" text="text image">
<br />
Name: <cfoutput>#orderquery.name[1]#</cfoutput><br />
League: <cfoutput>#orderquery.league[1]#</cfoutput><br />
View: <cfoutput><a href="#orderquery.website[1]#">Website:</a></cfoutput><br />
</cfimage></cfsavecontent>
<li>
<cftooltip tooltip="#tooltip_image1#" hidedelay="5000">
<img src="images/bRedsoxLogoSmall.png" alt="Boston Red Sox" />
</cftooltip>
</li>
<!--- info for logo 2 --->
</cfset><cfset image_path = "images/hAstrosLogoLarge.png" >
<cfimage name="large_preview" source="#image_path#">
<cfset imageScaleToFit(large_preview,350,350,'bicubic')>
<cfsavecontent variable="tooltip_image2">
<cfimage source="#large_preview#" action="writeToBrowser" text="text image">
<br />
Name: <cfoutput>#orderquery.name[2]#</cfoutput><br />
League: <cfoutput>#orderquery.league[2]#</cfoutput><br />
View: <cfoutput><a href="#orderquery.website[2]#">Website:</a></cfoutput><br />
</cfimage></cfsavecontent>
<li>
<cftooltip tooltip="#tooltip_image2#" hidedelay="5000">
<img src="images/hAstrosLogoSmall.png" alt="Houston Astros" />
</cftooltip>
</li>
<!--- info for logo 3 --->
</cfset><cfset image_path = "images/sfGiantsLogoLarge.png" >
<cfimage name="large_preview" source="#image_path#">
<cfset imageScaleToFit(large_preview,350,350,'bicubic')>
<cfsavecontent variable="tooltip_image3">
<cfimage source="#large_preview#" action="writeToBrowser" text="text image">
<br />
Name: <cfoutput>#orderquery.name[3]#</cfoutput><br />
League: <cfoutput>#orderquery.league[3]#</cfoutput><br />
View: <cfoutput><a href="#orderquery.website[3]#">Website:</a></cfoutput><br />
</cfimage></cfsavecontent>
<li>
<cftooltip tooltip="#tooltip_image3#" hidedelay="5000">
<img src="images/sfGiantsLogoSmall.png" alt="San Francisco Giants" />
</cftooltip>
</li>
</cfset></cfimage></cfset></cfimage></cfset></cfimage></cfset></ul>
</div>
</div>
</cfset></cffile>
Here is what the layout looks like.
Now you will just hover over one of the logos and the tooltip will appear as such:
