The Ext.QuickTips functionality provides attractive and customizable tooltips for any element. Adobe didn't add any QuickTips functionality to ColdFusion 8, but the JavaScript files to support it are included with the other Ext related files in the "CFIDE/scripts" directory, so I am going to show you a couple simple ways you can utilize them to enhance your tooltips.
In this first example, I will show you how to register a quick tip directly from your HTML tags. To add a QuickTip to any element of your page you simply add one or more of the valid QuickTip attributes prefixed with the ext: namespace to the HTML tag. The HTML element itself is automatically set as the quick tip target. Here is a summary of supported attributes (optional unless otherwise noted):
- hide: Specifying "user" will cause the tip to remain visible until the user manually closes it, or clicks on another element. Any other value will cause the tip to hide when the mouse is not over the element.
- qtip (required): The quick tip text.
- qtitle: The quick tip title.
- qwidth: The quick tip width.
- qclass: A CSS class to be applied to the quick tip.
<html>
<head>
<title>QuickTips</title>
<!--- import all the neccessary JS and CSS files for the QuickTips --->
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/adapter/yui/ext-yui-adapter.js"></script>
<script src="/CFIDE/scripts/ajax/ext/ext-all.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="/CFIDE/scripts/ajax/resources/ext/css/ext-all.css">
<script src="/CFIDE/scripts/ajax/ext/package/qtips/qtips.js" type="text/javascript"></script>
</head>
<body>
<!--- set up form elements wih quickTip attributes --->
<form name="MyForm">
<b>First Name:</b>
<input id="MyNumberField"
type="Text"
name="MyNumberField"
ext:qtitle="First Name"
ext:qwidth="100"
ext:qtip="Enter your first name in this field"
><br>
<b>Last Name:</b>
<input id="MyStringField"
type="Text"
name="MyStringField"
ext:qtitle="Last Name"
ext:qwidth="100"
ext:qtip="Enter a your last name in this field"
ext:hide="user"><br>
<input id="SubmitButton"
type="button" value="Submit"
ext:qtitle="Submit"
ext:qwidth="300"
ext:qtip="Click here to submit the form. (this doesn't really do anything if you click it)">
</form>
<!--- initiate the quick tips --->
<script language="JavaScript">
Ext.QuickTips.init();
</script>
</body>
</html>
Another way to implement the quick tips functionality, would be to enable the interceptTitles config option. This will cause the QuickTips to automatically appear for every HTML element that has the "title" attribute set. You can set an HTML string as the value of the title attribute. This method is a little flawed in Internet Explorer, in that the normal yellow title tooltip appears above the QuickTip the first time you mouse over an element (I believe this can be attributed to how IE uses the title attribute as if it were the alt attribute... who needs standards when you're Microsoft, right?)
<html>
<head>
<title>QuickTips</title>
<!--- import all the neccessary JS and CSS files for the QuickTips --->
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/adapter/yui/ext-yui-adapter.js"></script>
<script src="/CFIDE/scripts/ajax/ext/ext-all.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="/CFIDE/scripts/ajax/resources/ext/css/ext-all.css">
<script src="/CFIDE/scripts/ajax/ext/package/qtips/qtips.js" type="text/javascript"></script>
</head>
<body>
<!--- Set up the form with HTML in the titles --->
<form name="MyForm">
<b>First Name:</b> <input id="FirstName" type="Text" name="FirstName" title="<b>First Name</b><br>Enter your first name in this field"><br>
<b>Last Name:</b> <input id="LastName" type="Text" name="LastName" title="<b>Last Name</b><br>Enter a your last name in this field"><br>
<input id="SubmitButton" type="button" value="Submit" title="<b>Submit</b><br>Click here to submit the form. (this doesn't really do anything if you click it)">
</form>
<!--- initiate the quick tips with interceptTitles set to true --->
<script language="JavaScript">
Ext.QuickTips.interceptTitles = true;
Ext.QuickTips.init();
</script>
</body>
</html>
If you want to customize the colors used in the QuickTips you can make your own style sheet that contains the x-tip classes, then include that instead of the ext-all.css. Here is how those classes are set up in the ext-all.css file, so you can copy them and make changes from there.
position: absolute;
top: 0;
left:0;
visibility: hidden;
z-index: 20000;
border:0 none;
}
.x-tip .x-tip-close{
background-image: url(../images/default/qtip/close.gif);
height: 15px;
float:right;
width: 15px;
margin:0 0 2px 2px;
cursor:pointer;
display:none;
}
.x-tip .x-tip-top {
background: transparent url(../images/default/qtip/tip-sprite.gif) no-repeat 0 -12px;
height:6px;
overflow:hidden;
}
.x-tip .x-tip-top-left {
background: transparent url(../images/default/qtip/tip-sprite.gif) no-repeat 0 0;
padding-left:6px;
zoom:1;
}
.x-tip .x-tip-top-right {
background: transparent url(../images/default/qtip/tip-sprite.gif) no-repeat right 0;
padding-right:6px;
zoom:1;
}
.x-tip .x-tip-ft {
background: transparent url(../images/default/qtip/tip-sprite.gif) no-repeat 0 -18px;
height:6px;
overflow:hidden;
}
.x-tip .x-tip-ft-left {
background: transparent url(../images/default/qtip/tip-sprite.gif) no-repeat 0 -6px;
padding-left:6px;
zoom:1;
}
.x-tip .x-tip-ft-right {
background: transparent url(../images/default/qtip/tip-sprite.gif) no-repeat right -6px;
padding-right:6px;
zoom:1;
}
.x-tip .x-tip-bd {
border:0 none;
font: normal 11px tahoma,arial,helvetica,sans-serif;
}
.x-tip .x-tip-bd-left {
background: #fff url(../images/default/qtip/tip-sprite.gif) no-repeat 0 -24px;
padding-left:6px;
zoom:1;
}
.x-tip .x-tip-bd-right {
background: transparent url(../images/default/qtip/tip-sprite.gif) no-repeat right -24px;
padding-right:6px;
zoom:1;
}
.x-tip h3 {
font: bold 12px tahoma,arial,helvetica,sans-serif;
margin:0;
padding:2px 2px;
color:#222;
}
.x-tip .x-tip-bd-inner {
margin:0 !important;
line-height:14px;
color:#222;
padding:0;
float:left;
}
Comments (7) |
8191 Views
If you are looking for an experienced, professional, and reliable ColdFusion development company, contact PALADEM today.
But you definitely need to know your audience, if you web analytics indicate that you have a sizable amount of dial up users you may want to work harder to make sure your site loads fast enough for them. I remember back in 1996 when I had dial up and I would click on a link and then walk away, then come back 5 minutes later and the page would still be loading.... I don't know how anyone could stand it.
A recent Yahoo paper (I think you can find in on the Yahoo ySlow page) reported that contrary to popular belief, most web content is *not* cached. The paper had some interested numbers (which I can't recall offhand.) The point was basically don't assume your content is being cached by the browser.
Is this the article?
http://yuiblog.com/blog/2007/01/04/performance-res...
If I am reading it correctly (and I read it quickly so I may not be) it seems to say that in their experiment about 20% of the browsers to that page did not cache the image. That seems to imply that about 80% of the browsers are using a cached image after the initial page load.
I am not surprised that many users disable their caching, in fact that is one of the first things I do when I set up a new computer that I am going to be using. For me it is because I work on websites and don't want to have to clear my cache every time I make a change to a web page to see the results of my change. For other people it is simply a matter of privacy; perhaps they don't want others to see what kind of pages they browse on the internet.
In any case, I still believe (and I recognize my belief may not be firmly planted in reality, as I have not researched it thoroughly) that most commonly used browsers, set to their default cache settings, will cache these files.
If it was a different article you read, I would be interested in reading it, if you can find the link.
--Dave
How about mouseout of the quicktip window? Is there a config option for it? Is there a config option for quicktip window to hide when mouse is out of the tip window?
thanks