PDA

View Full Version : Hover/Popup Card extjs way



just_a_kid
28 Dec 2010, 2:20 AM
Hi,

When do mouse over on some icon for example , i want some inline hover card/page showing ( could be external page ) and it will be only hidden/destroy when mouseout from hover page/the icon that trigger the hover card display.

What is the best way to implement such above using extjs way ?

Condor
28 Dec 2010, 2:28 AM
Use an Ext.ToolTip with the target set to your icon element.

just_a_kid
28 Dec 2010, 8:01 PM
Is there anyway to configure Ext.ToolTip to only hide the shown element only when mouse out from target element AND mouse out from shown element.

Basically what i want similar to google search results
1. when mouse over to target element , hover div card is showing
2. people can move the mouse to the inside shown element and the cursor become hand
3. shown element only hidden after mouse out in both shown element and target element

Thanks

Condor
28 Dec 2010, 11:56 PM
Doesn't a tooltip already do that?

just_a_kid
29 Dec 2010, 1:10 AM
It seems no.

This is my configuration



var tt = new Ext.ToolTip({
id: 'graph-tip-'+treeId,
target: 'maingraph-'+treeId,
anchor: 'bottom',
anchorOffset :90,
html: null,
title:'My Tooltip',
width: 500,
trackMouse : false,
autoHide: true,
stateful:false,
closable: true,
hideDelay:1000,
mouseOffset : [-100,0],
contentEl: charttipid,
listeners: {
'render': function(){
loadChart(charttipid,treeId);
},
'beforehide' : function(){

}
}
});


Using above configuration when i move my mouse into the contentEl area . the contentEl will be hidden which is not supposed to be.

Also i notice , even i put my mouse on the target element , after sometimes the tooltip hidden by itself . i think this is default behaviour from Ext.ToolTip ?

What i want is more to the preview div popup instead of tooltip

I am using extjs 3.2.0

Condor
29 Dec 2010, 2:41 AM
1. To stop the tip from hiding after a delay set: dismissDelay:0
2. Correct, you would have to add onTargetOver and onTargetOut event handlers to the tip itself too and modify these handlers to they check if the mouse is over the target or the tip.

just_a_kid
29 Dec 2010, 7:02 AM
Thanks.

One more thing is there any way to define tooltip to automatically show up the tip on the above / left /right /bottom tip depending on the page height and width at the moment and location of the mouse at the moment

Seems the default one always shown at the bottom which might be inconvinient if my target icon is located at the very bottom of m page which will create vertical scrollbar.

Condor
29 Dec 2010, 7:39 AM
You configured anchor:'bottom' as default, but it should automatically adjust to fit inside the viewport.

just_a_kid
30 Dec 2010, 12:46 AM
Thanks

I have created a tip function like below to calculate dynamically where should i display the tooltip



function createTooltip(treeId,nodeId,targetElId){

//alert(treeId+"="+nodeId+"="+targetElId);
var uniqueID = "";
var targetEl = Ext.get(targetElId);

if(typeof(targetEl) == 'undefined' || targetEl == null){
return;
}

if(typeof(treeId) !='undefined' && treeId!=null){
uniqueID += treeId;
uniqueID += "-";
}

if(typeof(nodeId) !='undefined' && nodeId!=null){
uniqueID += nodeId;
}

var tooltipID = "graph-tip-"+uniqueID;

var cmp = Ext.getCmp(tooltipID);

if(cmp!=null){
return;
}

var charttipid = "chart-tip-"+uniqueID;
var charttipel = Ext.get(charttipid);

if(typeof(charttipel) == 'undefined' || charttipel == null){
var treeDivEl = document.createElement("div");
treeDivEl.id = charttipid;
treeDivEl.tooltipid = tooltipID;
document.body.appendChild(treeDivEl);
}else{
charttipel.removeAllListeners();
}

var centerX = targetEl.getCenterXY()[0];
var centerY = targetEl.getCenterXY()[1];
var targetX = targetEl.getX();
var targetY = targetEl.getY();


//var mouseX = window.event.clientX;
//var mouseY = window.event.clientY;
//alert(mouseX+"="+targetX);
//alert(mouseY+"="+targetY);

var pageWidth = centerX * 2 ;
var pageHeight = centerY * 2;

var tipHeight = 300;
var tipWidth = 300;

var anchor="bottom";
var mouseOffSet=[0,0];

var anchorSet = false;
var trackerMouseOverInd = true;
var anchorOffSet = 0;


if(anchorSet==false && targetX > centerX && (targetY+tipHeight <= pageHeight)){
anchor = "left";
mouseOffSet = [0,-95];
anchorSet = true;
}

if(anchorSet==false && targetX <= centerX && (targetY+tipHeight <= pageHeight)){
anchor = "right";
mouseOffSet = [0,-95];
anchorSet = true;
}

if(anchorSet==false && targetY > centerY && (targetX+tipWidth <= pageWidth)){
anchor = "bottom";
mouseOffSet = [-100,0];
anchorSet = true;
}

if(anchorSet==false && targetY <= centerY && (targetX+tipWidth <= pageWidth) ){
anchor = "top";
mouseOffSet = [-100,0];
anchorSet = true;
}



if(trackerMouseOverInd==true){
mouseOffSet = [0,-5];
anchorOffSet = 90;
}else{
anchorOffSet = 90;
}


//alert(targetEl.getTop()+"="+targetEl.getY()+"="+targetEl.getX());
//alert(targetEl.getCenterXY()[0]+"="+targetEl.getCenterXY()[1]);



var tt = new Ext.ToolTip({
id: tooltipID,
target: targetEl,
anchor: anchor,
anchorOffset :anchorOffSet,
html: null,
title:'LATTE Application Recertifications: Current Quarter Status '+charttipid,
width: 400,
trackMouse : trackerMouseOverInd,
autoHide: true,
stateful:false,
closable: true,
//showDelay:500,
hideDelay:500,
dismissDelay:0,
mouseOffset : mouseOffSet,
contentEl: charttipid, // load content from the page
listeners: {
'render': function(t){
loadChart(charttipid,uniqueID);
},
'beforehide' : function(t){
chartViewingInProgress=false;
//alert(t.contentEl);
},
'beforeshow' : function(t){
//tt.setPagePosition(200,200);
//tt.doLayout();

if(currentActiveToolTipId != t.id){
//alert(currentActiveToolTipId);
var cmp = Ext.getCmp(currentActiveToolTipId);
if(cmp!=null){
cmp.hide();
}
}

currentActiveToolTipId = t.id;
chartViewingInProgress=true;
},
'show' : function(t){
//tt.setPagePosition(200,200);
//tt.doLayout();
//tt.removeListener("mousemove");
},
'move' : function(t,x,y){
//alert("move"+x);

}
}
});


Ext.get(charttipid).on("mouseenter",function(e,t,o){
var cmp = Ext.getCmp(t.tooltipid);
cmp.delayShow();
});

Ext.get(charttipid).on("mouseleave",function(e,t,o){
var cmp = Ext.getCmp(t.tooltipid);
cmp.delayHide();
});



}


There is problems that i encountered.
1. i need to display tool tip which have graph content in every tree node icon in every treenode in treeid on hover ( thats why i created the function )
Something like below in my TreeGrid config


tpl: new Ext.XTemplate('{total:this.checkLevel}', {
checkLevel: function(value, record) {

var chartId = "chart-"+record.id;

tmp = '&nbsp;'+value+'<span id="chart-'+record.id+'" onmouseover="createTooltip(null,\''+record.id+'\',\''+chartId+'\');" class="display-hidden" style="position:absolute;left:660px;"><img id="chartimg-'+record.id+'" src="images/graph.gif"></span>';
return tmp;
}
})
2. using trackMouseOver = true , my tooltip seems working fine , but when i move my mouse the tip itself position also move , how do i stop that ?
3. using trackMouseOver = false , there is a problem , when i hover on particular node icon in my treenode it works fine , as soon i move my mouse outside the target element and mouse enter to the tip element , the tip show at -1000,-1000 causing the duplicate images to be shown on my screen.
I checked the code , its because of


Ext.get(charttipid).on("mouseenter",function(e,t,o){
var cmp = Ext.getCmp(t.tooltipid);
cmp.delayShow();
});


show : function(){
if(this.anchor){
// pre-show it off screen so that the el will have dimensions
// for positioning calcs when getting xy next
this.showAt([-1000,-1000]);
this.origConstrainPosition = this.constrainPosition;
this.constrainPosition = false;
this.anchor = this.origAnchor;
}
this.showAt(this.getTargetXY());


if(this.anchor){
this.syncAnchor();
this.anchorEl.show();
this.constrainPosition = this.origConstrainPosition;
}else{
this.anchorEl.hide();
}
}


funny thing is these only happen when i use trackMouseOver : false .

Any idea how to solve this ?

just_a_kid
30 Dec 2010, 12:49 AM
i need to display tooltip for every tree node in my tree grid on hover.

1.When i use trackMouseOver:true , my tip working fine but when i move my mouse to the tip element , the tip element position also move , how can i stop that ?

2. when i use trackMouseOver:false, there is a problem , when i hover to target element , the tip element is shown which is fine. as soon i move my mouse out outside target element and towards tip element , the tip element is shown at positin -1000,-1000

Here is my configuration



function createTooltip(treeId,nodeId,targetElId){

//alert(treeId+"="+nodeId+"="+targetElId);
var uniqueID = "";
var targetEl = Ext.get(targetElId);

if(typeof(targetEl) == 'undefined' || targetEl == null){
return;
}

if(typeof(treeId) !='undefined' && treeId!=null){
uniqueID += treeId;
uniqueID += "-";
}

if(typeof(nodeId) !='undefined' && nodeId!=null){
uniqueID += nodeId;
}

var tooltipID = "graph-tip-"+uniqueID;

var cmp = Ext.getCmp(tooltipID);

if(cmp!=null){
return;
}

var charttipid = "chart-tip-"+uniqueID;
var charttipel = Ext.get(charttipid);

if(typeof(charttipel) == 'undefined' || charttipel == null){
var treeDivEl = document.createElement("div");
treeDivEl.id = charttipid;
treeDivEl.tooltipid = tooltipID;
document.body.appendChild(treeDivEl);
}else{
charttipel.removeAllListeners();
}

var centerX = targetEl.getCenterXY()[0];
var centerY = targetEl.getCenterXY()[1];
var targetX = targetEl.getX();
var targetY = targetEl.getY();


//var mouseX = window.event.clientX;
//var mouseY = window.event.clientY;
//alert(mouseX+"="+targetX);
//alert(mouseY+"="+targetY);

var pageWidth = centerX * 2 ;
var pageHeight = centerY * 2;

var tipHeight = 300;
var tipWidth = 300;

var anchor="bottom";
var mouseOffSet=[0,0];

var anchorSet = false;
var trackerMouseOverInd = true;
var anchorOffSet = 0;


if(anchorSet==false && targetX > centerX && (targetY+tipHeight <= pageHeight)){
anchor = "left";
mouseOffSet = [0,-95];
anchorSet = true;
}

if(anchorSet==false && targetX <= centerX && (targetY+tipHeight <= pageHeight)){
anchor = "right";
mouseOffSet = [0,-95];
anchorSet = true;
}

if(anchorSet==false && targetY > centerY && (targetX+tipWidth <= pageWidth)){
anchor = "bottom";
mouseOffSet = [-100,0];
anchorSet = true;
}

if(anchorSet==false && targetY <= centerY && (targetX+tipWidth <= pageWidth) ){
anchor = "top";
mouseOffSet = [-100,0];
anchorSet = true;
}



if(trackerMouseOverInd==true){
mouseOffSet = [0,-5];
anchorOffSet = 90;
}else{
anchorOffSet = 90;
}


//alert(targetEl.getTop()+"="+targetEl.getY()+"="+targetEl.getX());
//alert(targetEl.getCenterXY()[0]+"="+targetEl.getCenterXY()[1]);



var tt = new Ext.ToolTip({
id: tooltipID,
target: targetEl,
anchor: anchor,
anchorOffset :anchorOffSet,
html: null,
title:'LATTE Application Recertifications: Current Quarter Status '+charttipid,
width: 400,
trackMouse : trackerMouseOverInd,
autoHide: true,
stateful:false,
closable: true,
//showDelay:500,
hideDelay:500,
dismissDelay:0,
mouseOffset : mouseOffSet,
contentEl: charttipid, // load content from the page
listeners: {
'render': function(t){
loadChart(charttipid,uniqueID);
},
'beforehide' : function(t){
chartViewingInProgress=false;
//alert(t.contentEl);
},
'beforeshow' : function(t){
//tt.setPagePosition(200,200);
//tt.doLayout();

if(currentActiveToolTipId != t.id){
//alert(currentActiveToolTipId);
var cmp = Ext.getCmp(currentActiveToolTipId);
if(cmp!=null){
cmp.hide();
}
}

currentActiveToolTipId = t.id;
chartViewingInProgress=true;
},
'show' : function(t){
//tt.setPagePosition(200,200);
//tt.doLayout();
//tt.removeListener("mousemove");
},
'move' : function(t,x,y){
//alert("move"+x);

}
}
});


Ext.get(charttipid).on("mouseenter",function(e,t,o){
var cmp = Ext.getCmp(t.tooltipid);
cmp.delayShow();
});

Ext.get(charttipid).on("mouseleave",function(e,t,o){
var cmp = Ext.getCmp(t.tooltipid);
cmp.delayHide();
});



}