Hi,
1. For automatically hide need to catch mouseout event to target and window
2. If you don't want animation then just need to pass null target to show function of the Window
3. You can just to add ext:qtip='My custom tip' an attribute to your image for example
Below you can find changed example (if you can to wrap all functionality to custom control then it will be useful for the community)
<%@ Page Language="C#" %>
<%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function regTip(target, window) {
var targetEl = Ext.get(target);
//set init position for preventing flickering on first showing
var trgPos = targetEl.getBox();
window.x = trgPos.x;
window.y = trgPos.y + trgPos.height + 5;
var dt = null;
window.getEl().on('mouseover', function() {
if (dt != null) { dt.cancel(); dt = null; };
});
targetEl.on('mouseover', function() {
if (dt != null) { dt.cancel(); dt = null;};
window.show(null, function() {
window.alignTo(targetEl, "bl", [0, 5])
});
});
var f = function() {
if (dt != null) {
dt.cancel();
dt = null;
}
dt = new Ext.util.DelayedTask(function(window) { if (!window.mouseOn) { window.hide(); } }, this, [window]);
dt.delay(1000);
}
window.getEl().on('mouseout', f);
targetEl.on('mouseout', f);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server">
<Listeners>
<DocumentReady Handler="regTip('imgTarget', #{TipWindow});" />
</Listeners>
</ext:ScriptManager>
<ext:Window ID="TipWindow" runat="server"
Centeronload="false"
Showonload="false"
Border="false"
Resizable="false"
Closable="false" >
<Content>
some content
</Content>
</ext:Window>
<img id="imgTarget" src="image.png" />
<br />
<img id="img1" ext:qtip="Custom Tip" src="image.png" />
</form>
</body>
</html>