angularjs - How to position a DHTMLX Popup beside a html component without using co-ordinates -

i have basic service creates manages dhtmlx popup component. so:

var popupservices = angular.module('popup.services', []); popupservices.factory('popupservice', ['$rootscope', function($rootscope) {     this.popupobject = null;     return{         createpopup: function(){             if (!this.popupobject) {                 this.popupobject = new dhtmlxpopup();             }         },         showpopup: function(htmlid,text){             this.popupobject.attachhtml(text);             this.popupobject.show(htmlid);         },         hidepopup : function() {             this.popupobject.hide();         }     }; }]); 

i want pass id of button or html component want link popup to, in future if button moved, popup moves it.

this angular application , following solution not work :

http://dhtmlx.com/docs/products/dhtmlxpopup/samples/01_init/07_custom_object.html

this regards code :

window.dhx4.absleft(inp), window.dhx4.abstop(inp), inp.offsetwidth, inp.offsetheight 

any ideas on how give html component id , linking popup id?

thanks anton

you can implement new prototype shownexttoid. there code below, based on sample you've mentioned

function showpopup(button) {     if (!mypop) {         mypop = new dhtmlxpopup();         mypop.attachhtml("button clicked");     }     if (mypop.isvisible()) {         mypop.hide();     } else {         mypop.shownexttoid(button.id); // show id     } } function hidepopup() {     if (mypop) mypop.hide(); }  // can move separate file dhtmlxpopup.prototype.shownexttoid = function(id) {     if (typeof(id) == "string") id = document.getelementbyid(id);     var x = window.dhx4.absleft(id);     var y = window.dhx4.abstop(id);     var w = id.offsetwidth;     var h = id.offsetheight;     this.show(x,y,w,h); }; 

and input:

<input type="button" id="btn" onclick="showpopup(this);"  onblur="hidepopup();" value="click">