Hi,
Attached is a sample based on the sample you have sent me.

Thanks again
 

Hello,

After reviewing the sample you provided, the behavior you are describing is expected.  When the tooltip leaves the area  of the iframe, it will resize to fit the content.  Using an iframe, I do not see a way for it to be possible for the tooltip to always be visible as you desire.  May I ask why you are using an iframe?  It would probably be easier and better practice to have the igDataChart loaded into the igDialog as I had done in my initial sample.  This also solves the issue with your tooltip.  Please let me know if this is a possibility.  I look forward to hearing back from you.   

Hi Joseph,
Thanks again for your time.
The way I see it, I am not sure the behavior of the tooltip is expected. It seems like the tooltip is always positioned to the lower right of the cursor pointer. I would expect that especially when setting the property tooltipPosition: 'auto', that when the tooltip hits the right edge (or the bottom edge), it would change its position rather then resize itself to try to fit the content. This is standard behavior for tooltips in windows or any other web page (try Gmail for example). The problem here is not with the dialog window, this is my scenario, but it will happen on every window, that the chart has an item close to the right edge of the screen. Try set the width of the chart in the sample that you send me to the maximum width of your screen, and you will see the behavior is repeated. With this behavior I can not use the chart on the right side of my page, or if my tooltip contains more then one or two lines, and the height of it is is larger then the normal 30-50 pixels, I can not place the chart on the bottom of the page as well (example screenshot is attached).
As for the reason I use the iframe control in my dialog window, the reason is that my "base" page can open more then 10 different dialogs, that some of them can open more dialog themself. I think having them all in my base HTML page will bloat the HTML to a very large size.
Other then that some of the dialogs can be opened from other "base" pages, so keeping them in one centralized HTML file is better practice, and a better solution.
I would love to drop the iframe control and supply the dialog with a template file, but the only way to do it with the igDialog control is through an iframe control.
and example could be  viewed at  http://www.igniteui.com/dialog-window/loading-external-page .

Thanks again for your time and efforts
Looking forward hearing from you. 

Hello Amos,

Thank you very much for your patience.  I have asked some of our team leads to look at this issue further, and I will get back to you tomorrow when I receive more information from them. 

Thanks Mike,

works as expected. 

I changed a bit your function, so the tooltip will be left (or above) of the cursor because the way you implemented it, it was sometimes hiding the datapoint that the cursor was pointing at.

My implementation of the function :

function handleMouseMove(event) {

    var tooltip = $('#2015Population_tooltip'); //'2015Population' is the series' name
    if (tooltip[0]) {
        tooltip.css({ 'white-space': 'nowrap' });
       var $window = $(window);
       var wWidth = $window.width();
       var wHeight = $window.height();
       var width = tooltip.outerWidth(true);
       var height = tooltip.outerHeight(true);
       var left = tooltip.position().left;
       var top = tooltip.position().top;

       if (width + left > wWidth) {
            var wlimit = event.clientX - width;
            tooltip.css({ left: wlimit + 'px' });
       }
        if (height + top > wHeight) {
             var hlimit = event.clientY - height;
             tooltip.css({ top: hlimit + 'px' });
        }

    }

}

Thanks again

Hello Amos_silberman,

I have spoken with our development team and as a workaround you can attach the following event/method to the mouse move event:

// atach for mouse move event

document.onmousemove = handleMouseMove;

function handleMouseMove(event) {
    var tooltip = $('#2015Population_tooltip'); //'2015Population' is the series' name
    if (tooltip[0]) {
        var $window = $(window);
        var wWidth = $window.width();
        var width = tooltip.outerWidth(true);
        var left = tooltip.position().left;
        if (width + left > wWidth) {
            var limit = wWidth - width;
            tooltip.css({ left: limit + 'px' });
        }
    }
}

I am also attaching a modified version of your sample to demonstrate this behavior.

Hello,

Is there any update on the issue? 
Customers are keep asking me for answers..

is there any workaround?

Thanks for your help Joe,

looking forward for any updates on the issue.