http://demos.mootools.net/Tips
I cannot get this to work at all. Example, hover over the info icon in the APF row. No bubble.png background pops up, text shows up as one line instead of two.
I have set the following with the proper path for sure
css
Code:
.tool-tip {
color: #fff;
width: 139px;
z-index: 13000;
}
.tool-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #9FD4FF;
padding: 8px 8px 4px;
background: url(../images/bubble.png) top left;
}
.tool-text {
font-size: 11px;
padding: 4px 8px 8px;
background: url(../images/bubble.png) bottom right;
}
.custom-tip {
color: #000;
width: 130px;
z-index: 13000;
}
.custom-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #3E4F14;
padding: 8px 8px 4px;
background: #C3DF7D;
border-bottom: 1px solid #B5CF74;
}
.custom-text {
font-size: 11px;
padding: 4px 8px 8px;
background: #CFDFA7;
}
HTML Code:
<td style="width: 100px; height: 24px;" class="style8">
<img alt="Info" src="../images/report.gif" class="Tips1" title="Tips Title :: This is my tip content" style="border:0px" /></a></td>
The js I'm using is 100% copied/pasted from the demo page I mentioned
Code:
/* Tips 1 */
var Tips1 = new Tips($$('.Tips1'));
/* Tips 2 */
var Tips2 = new Tips($$('.Tips2'), {
initialize:function(){
this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
},
onShow: function(toolTip) {
this.fx.start(1);
},
onHide: function(toolTip) {
this.fx.start(0);
}
});
/* Tips 3 */
var Tips3 = new Tips($$('.Tips3'), {
showDelay: 400,
hideDelay: 400,
fixed: true
});
/* Tips 4 */
var Tips4 = new Tips($$('.Tips4'), {
className: 'custom'
});
This is for LogicWeb
http://www.logicweb.com/services/security.php (this page mainly at this time)
HTML Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>LogicWeb, a smart web solution</title>
<meta name="author" content="LogicWeb" />
<meta name="description" content="LogicWeb, provider of affordable website hosting since 2004." />
<meta name="keywords" content="web hosting, hosting, shared hosting, reseller hosting, cheap domains, multiple domains, affordable web hosting, support, savvis datacenter, LogicWeb, cenixhost, webhost, web host, inexpensive, cheap, australia, bundle multi-accounts, united states, webhosting from savvis, website hosting, reliable, affordable, solutions, services, quality, superior uptime, designers, developers, web agencies, hosting plans, large bandwidth" />
<style type="text/css">
<!--
@import url("../styles/site.css");
@import url("../styles/2ndlevel.css");
@import url("../styles/tips.css");
@import url("../styles/style.css");
#menuItemServices { background-image:url(../images/navigation/on_services.gif); }
-->
</style>
<style type="text/css">
.hiddenPic {display:none;}
</style>
<script src="/scripts/tips.js" type="text/javascript"></script>
<script src="/scripts/mootools.js" type="text/javascript"></script>
</head>
As suggested in mootools forum, I did the following in the tips.js file
Code:
/* Tips 1 */
window.addEvent('domready', function() {
var Tips1 = new Tips($$('.Tips1'));
});
Firebug shows this error now
Apparently I did not set up tips.js correctly.
Any help on this appreciated.
Not sure what else is left to do and why it still does not work. Thanks again. I read the docs, but to be honest its another "language" to me
If anyone could please explain this I would appreciate it. I merely just want Tips to work exactly as it does in the demo, the first option (no delay, instant popup on hover).
I even reversed the script loading in security.php so that mootools.js loads first. Now firebug shows the following error
Quote:
C has no properties
inject(null, undefined)mootools.js (line 64)
initialize([], Object)mootools.js (line 133)
Class()mootools.js (line 16)
[Break on this error] break;}default:C.appendChild(this);}return this;},injectBefore:function(A){retur...
|
However, I never modified mootools.js at all, just uploaded as is.
Please understand I am not a programmer or web developer by trade. Linux is my specialty, not web design. But I'm willing to learn and listen with your help.
Thanks in advance.
