tweak tooltip confine.

Author: 100pah

src/component/tooltip/TooltipView.js

@@ -699,8 +699,9 @@ define(function (require) {
     }
 
     function refixTooltipPosition(x, y, el, viewWidth, viewHeight, gapH, gapV) {
-        var width = el.offsetWidth;
-        var height = el.offsetHeight;
+        var size = getOuterSize(el);
+        var width = size.width;
+        var height = size.height;
 
         if (gapH != null) {
             if (x + width + gapH > viewWidth) {
@@ -722,8 +723,9 @@ define(function (require) {
     }
 
     function confineTooltipPosition(x, y, el, viewWidth, viewHeight) {
-        var width = el.clientWidth;
-        var height = el.clientHeight;
+        var size = getOuterSize(el);
+        var width = size.width;
+        var height = size.height;
 
         x = Math.min(x + width, viewWidth) - width;
         y = Math.min(y + height, viewHeight) - height;
@@ -733,6 +735,25 @@ define(function (require) {
         return [x, y];
     }
 
+    function getOuterSize(el) {
+        var width = el.clientWidth;
+        var height = el.clientHeight;
+
+        // Consider browser compatibility.
+        // IE8 does not support getComputedStyle.
+        if (document.defaultView.getComputedStyle) {
+            var stl = document.defaultView.getComputedStyle(el);
+            if (stl) {
+                width += parseInt(stl.paddingLeft, 10) + parseInt(stl.paddingRight, 10)
+                    + parseInt(stl.borderLeftWidth, 10) + parseInt(stl.borderRightWidth, 10);
+                height += parseInt(stl.paddingTop, 10) + parseInt(stl.paddingBottom, 10)
+                    + parseInt(stl.borderTopWidth, 10) + parseInt(stl.borderBottomWidth, 10);
+            }
+        }
+
+        return {width: width, height: height};
+    }
+
     function calcTooltipPosition(position, rect, contentSize) {
         var domWidth = contentSize[0];
         var domHeight = contentSize[1];

test/tooltip.html

@@ -38,6 +38,8 @@ <h1>showDelay: 50 | enterable | dynamic callback</h1>
         <div class="chart" id="main"></div>
         <h1>set position</h1>
         <div class="chart" id="position"></div>
+        <h1>confine</h1>
+        <div class="chart" id="confine"></div>
         <h1>triggerOn click</h1>
         <div class="chart" id="click"></div>
         <h1>dispatchAciton manually with `position` specified (postion: [10,10])</h1>
@@ -602,6 +604,69 @@ <h1>dispatchAciton manually with `position` specified (postion: [10,10])</h1>
 
 
 
+
+        <script>
+
+            require([
+                'echarts',
+                'echarts/chart/pie',
+                'echarts/component/legend',
+                'echarts/component/grid',
+                'echarts/component/tooltip',
+                'zrender/vml/vml'
+            ], function (echarts) {
+
+                var option = {
+                    tooltip: {
+                        confine: true,
+                        borderWidth: 10,
+                        borderColor: 'green',
+                        padding: 20,
+                        formatter: "{a} <br/>{b} : {c} ({d}%)"
+                    },
+                    series: {
+                        name: '访问来源',
+                        type: 'pie',
+                        radius : 1180,
+                        data:[
+                            {
+                                value:335, name:'position: [300, 100]',
+                            },
+                            {
+                                value:310, name:'position: function [p[0] + 10, p[1] - 50]',
+                            },
+                            {
+                                value:234, name:'position: inside',
+                            },
+                            {
+                                value:135, name:'align: right; verticalAlign: bottom',
+                                tooltip: {
+                                    align: 'right',
+                                    verticalAlign: 'bottom'
+                                }
+                            },
+                            {
+                                value:548, name:'position: [30, 140], verticalAlign: bottom',
+                            }
+                        ],
+                        itemStyle: {
+                            emphasis: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        }
+                    }
+                };
+
+                createChart('confine', echarts, option, 500);
+            })
+        </script>
+
+
+
+
+
         <script>
 
             require([