[SOLVED] On Hover : How to show a tool tip with copy option for all url's inside a textarea field in Extjs

On Hover : How to show a tool tip with copy option for all url's inside a textarea field in Extjs

I am new to ExtJs ,In this I have a textareafield binding data from API response.

What I want to do is if the response has any url's in it I would like to show a tool tip kind of thing with copy option when user hover on it.Can anyone help me to get this .

code:

xtype: 'textareafield',
fieldLabel: 'Reponse',
name: 'response',
align: 'stretch',
allowBlank: false,
flex: 1

response.setValue(StringUtils.addHtmlBreaks(record.get('response')));

Thanks..

Solution

I have created simple fiddle where I have shown one textarea and binded mouse events and shown tip accordingly in this fiddle.

textarea.on('mouseover',function(evt,field){
  //Show tip if url matches
},this);

textarea.on('mouseout',function(){
  //just hide tip
},this);

and matched url in textarea by text.match(/\bhttps?:\/\/\S+/gi)

In this fiddle I haven't implemented copy thing because I want to confirm if this behavior fits for you. Please check and reply for same, and in case of any edits in code suggest same.