PDA

View Full Version : Ext.Tipsy Initial



wregen
14 Sep 2010, 1:48 PM
Hi,
I'd like to share with the community Ext.Tipsy (very rough version of jQuery Tipsy, used in github). Example below.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
/* Ext.Tipsy CSS */
.tipsy { padding: 5px; font-size: 13px; position: absolute; z-index: 100001; display:none; }
.tipsy-inner { padding: 9px 12px 8px 12px; background-color: black; color: white; max-width: 1200px; text-align: center; white-space:nowrap;}
.tipsy-inner { border-radius: 4px; -moz-border-radius:4px; -webkit-border-radius:4px; }
.tipsy-arrow { position: absolute; background: url("data:image/png;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==") no-repeat top left; width: 9px; height: 5px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
/* Ext.Tipsy CSS */

.obj {float:left;margin:20px;width:100px;height:40px;background:#eee;border:1px solid #999}
body{font-family:Verdana, sans-serif;margin-left:100px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>
<title>Test</title>
</head>
<body>

<div class="obj" ext:tipsy="The First Ext Tipsy Example"></div>
<div class="obj" ext:tipsy="Another Ext Tipsy Example"></div>
<script>
Ext.Tipsy = function(){
var tipTpl = '<div class="tipsy tipsy-n"><div class="tipsy-arrow"></div><div class="tipsy-inner"></div></div>';
return {
init: function () {
this.body = Ext.getBody();
this.tip = Ext.get(Ext.DomHelper.append(this.body, tipTpl));
this.tip.setOpacity(.7);
this.tipInner = this.tip.down('.tipsy-inner');
this.attachTip();
},
attachTip: function() {
this.body.on({
scope : this,
mouseover : function(e, t) {
var target = Ext.fly(t),
tipsy = target.getAttribute('tipsy', 'ext');
if (!Ext.isEmpty(tipsy)) {
this.show(target);
}
},
mouseout : function(e, t) {
if (!Ext.isEmpty(t)) {
this.tip.hide();
}
}
});
},
show: function(t) {
xy = t.getXY();
h = t.getHeight();
w = t.getWidth();
this.tipInner.update(t.getAttribute('tipsy', 'ext'));
this.tip.show();
this.tip.setLocation(xy[0]-this.tip.getWidth()/2+w/2, xy[1]+h);
}
}
}();

Ext.onReady(function () {
Ext.Tipsy.init();
});
</script>
</body>
</html>

hello2008
14 Sep 2010, 6:58 PM
good work ;)
just one suggestion:
1. using Ext.ux namespace may be better: Ext.ux.Tipsy
2. browser compatibility:
works pretty well in Chrome 7, Firefox 3.6
losing border-radius in IE8
losing border-radius and tipsy-arrow in IE7/6

mcouillard
5 Oct 2010, 9:58 AM
Thank you! Now to add position logic so it never displays off the page...

taghouse
14 Oct 2010, 8:14 PM
Works Great, I will try to improve in anything I can help!