PDA

View Full Version : Tooltip on click instead of hover?



wez.morris
4 Sep 2009, 1:46 AM
Hi,
I'm trying to put together a colour picker for a form and I've got the following:



var ColorPicker = new Ext.form.TextField({
id: 'txtColor',
fieldLabel: 'Color'
});

var colorPalette = new Ext.ColorPalette({
listeners:{
'select': function(palette, selColor){Ext.getCmp('txtColor').setValue(selColor);}
}
});

var ColorPickBtn = new Ext.Button({
text: 'Color',
listeners:{
'click': function() { //Show Color Palette Tooltip

}
}
});

var ColorBox = new Ext.Container({
layout:'column',
layoutConfig:{
columns:2},
items:[{
padding:'1 0 1 0',
layout:'form',
items:[ColorPicker]
}, {
padding:'1 0 1 4',
layout:'form',
items:[ColorPickBtn]
}]
});


What I want is to click the button and have a tooltip appear with the color palette inside but don't know how to accomplish it.

Any suggestions?

adammascherin
9 Sep 2011, 8:38 AM
I know this is an old thread, but I needed similar functionality and found this:
http://troubleshootsfdc.blogspot.com/2010/09/display-extjs-tooltip-on-click-on.html

Thought I'd post this to help out anyone else looking for this functionality. Here's the code in case the URL goes down:


// Author : Rahul Jain
// Extend Tooltip component to override the behaviour
// of on mouseover to on click

Ext.ux.ClickToolTip = Ext.extend(Ext.ToolTip,{
initTarget : function(target){
var t;
if((t = Ext.get(target))){
if(this.target){
var tg = Ext.get(this.target);
this.mun(tg, 'click', this.onTargetOver, this);
//this.mun(tg, 'mouseover', this.onTargetOver, this);
this.mun(tg, 'mouseout', this.onTargetOut, this);
this.mun(tg, 'mousemove', this.onMouseMove, this);
}
this.mon(t, {
//mouseover: this.onTargetOver,
click: this.onTargetOver,
mouseout: this.onTargetOut,
mousemove: this.onMouseMove,
scope: this
});
this.target = t;
}
if(this.anchor){
this.anchorTarget = this.target;
}
}
});
Ext.reg('ux.ClickToolTip', Ext.ux.ClickToolTip);


Its Use:

new Ext.ux.ClickToolTip({
title: '',
id: '',
target: '',
anchor: 'bottom',
html: null,
closable: true,
trackMouse: true,
contentEl: '' // load content from the page

});