Permalink
Browse files

tweak tooltip confine.

  • Loading branch information...
100pah committed Jul 26, 2017
1 parent dae94c9 commit 0da06d8fb5a9cd902b08c9079e7a654ecff986a1
Showing with 90 additions and 4 deletions.
  1. +25 −4 src/component/tooltip/TooltipView.js
  2. +65 −0 test/tooltip.html
@@ -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];
View
@@ -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([

0 comments on commit 0da06d8

Please sign in to comment.