diff --git a/src/component/toolbox/ToolboxView.js b/src/component/toolbox/ToolboxView.js
index 35c3fc388f9ee58f1016c40af03b8b06ebdba5b4..58095e085a593a2b64a5ac284a05023532ba793b 100644
--- a/src/component/toolbox/ToolboxView.js
+++ b/src/component/toolbox/ToolboxView.js
@@ -157,6 +157,15 @@ export default echarts.extendComponentView({
                 path.setStyle(iconStyleModel.getItemStyle());
                 path.hoverStyle = iconStyleEmphasisModel.getItemStyle();
 
+                // Text position calculation
+                path.setStyle({
+                    text: titles[iconName],
+                    textAlign: iconStyleEmphasisModel.get('textAlign'),
+                    textBorderRadius: iconStyleEmphasisModel.get('textBorderRadius'),
+                    textPadding: iconStyleEmphasisModel.get('textPadding'),
+                    textFill: null
+                });
+
                 var tooltipModel = toolboxModel.getModel('tooltip');
                 if (tooltipModel && tooltipModel.get('show')) {
                     path.attr('tooltip', zrUtil.extend({
@@ -182,15 +191,14 @@ export default echarts.extendComponentView({
                     path.on('mouseover', function () {
                             // Should not reuse above hoverStyle, which might be modified.
                             var hoverStyle = iconStyleEmphasisModel.getItemStyle();
+                            var defaultTextPosition = toolboxModel.get('orient') === 'vertical'
+                                ? (toolboxModel.get('right') == null ? 'right' : 'left')
+                                : (toolboxModel.get('bottom') == null ? 'bottom' : 'top');
                             path.setStyle({
-                                text: titles[iconName],
-                                textPosition: iconStyleEmphasisModel.get('textPosition') || 'bottom',
                                 textFill: iconStyleEmphasisModel.get('textFill')
                                     || hoverStyle.fill || hoverStyle.stroke || '#000',
-                                textAlign: iconStyleEmphasisModel.get('textAlign') || 'center',
                                 textBackgroundColor: iconStyleEmphasisModel.get('textBackgroundColor'),
-                                textBorderRadius: iconStyleEmphasisModel.get('textBorderRadius'),
-                                textPadding: iconStyleEmphasisModel.get('textPadding')
+                                textPosition: iconStyleEmphasisModel.get('textPosition') || defaultTextPosition
                             });
                         })
                         .on('mouseout', function () {
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
index 1f33b69389515de8ebf93fc5da0af0c471f32b89..ddb8deca79c4e6f1af2f922f77fde9fcc2a2e966 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -135,6 +135,7 @@
   "map-contour": 2,
   "map-default": 1,
   "map-labels": 1,
-  "gauge-simple": 2,
-  "polar-rounded": 2
+  "polar-rounded": 2,
+  "toolbox-title": 4,
+  "gauge-simple": 2
 }
\ No newline at end of file
diff --git a/test/runTest/actions/toolbox-title.json b/test/runTest/actions/toolbox-title.json
new file mode 100644
index 0000000000000000000000000000000000000000..8bd35374376052ef300d60f94e61d4df4095b395
--- /dev/null
+++ b/test/runTest/actions/toolbox-title.json
@@ -0,0 +1 @@
+[{"name":"Action 1","ops":[{"type":"mousemove","time":442,"x":738,"y":167},{"type":"mousemove","time":646,"x":764,"y":123},{"type":"mousemove","time":854,"x":777,"y":87},{"type":"mousemove","time":1061,"x":781,"y":77},{"type":"mousemove","time":1269,"x":783,"y":73},{"type":"screenshot","time":2169},{"type":"mousemove","time":2740,"x":783,"y":73},{"type":"mousemove","time":2949,"x":771,"y":72},{"type":"mousemove","time":3157,"x":767,"y":71},{"type":"mousemove","time":3365,"x":766,"y":71},{"type":"screenshot","time":4013},{"type":"mousemove","time":5306,"x":766,"y":72},{"type":"mousemove","time":5507,"x":767,"y":160},{"type":"mousemove","time":5716,"x":768,"y":169}],"scrollY":20,"scrollX":0,"timestamp":1571728123033},{"name":"Action 2","ops":[{"type":"mousemove","time":49,"x":188,"y":404},{"type":"mousemove","time":265,"x":117,"y":409},{"type":"mousemove","time":480,"x":34,"y":450},{"type":"mousemove","time":689,"x":28,"y":465},{"type":"mousemove","time":905,"x":28,"y":479},{"type":"mousemove","time":1130,"x":28,"y":479},{"type":"screenshot","time":2010},{"type":"mousemove","time":2580,"x":29,"y":479},{"type":"mousemove","time":2785,"x":54,"y":480},{"type":"screenshot","time":3678},{"type":"mousemove","time":4380,"x":55,"y":480},{"type":"mousemove","time":4580,"x":62,"y":455},{"type":"mousemove","time":4782,"x":80,"y":424},{"type":"mousemove","time":4992,"x":80,"y":424}],"scrollY":446,"scrollX":0,"timestamp":1571728169650},{"name":"Action 3","ops":[{"type":"mousemove","time":334,"x":46,"y":160},{"type":"mousemove","time":534,"x":31,"y":153},{"type":"mousemove","time":736,"x":26,"y":150},{"type":"mousemove","time":956,"x":24,"y":150},{"type":"screenshot","time":1579},{"type":"mousemove","time":1884,"x":24,"y":150},{"type":"mousemove","time":2099,"x":24,"y":166},{"type":"mousemove","time":2299,"x":24,"y":175},{"type":"mousemove","time":2512,"x":24,"y":177},{"type":"screenshot","time":2982},{"type":"mousemove","time":3634,"x":25,"y":176},{"type":"mousemove","time":3834,"x":63,"y":167},{"type":"mousemove","time":4040,"x":79,"y":167}],"scrollY":892,"scrollX":0,"timestamp":1571728179913},{"name":"Action 4","ops":[{"type":"mousemove","time":196,"x":699,"y":313},{"type":"mousemove","time":406,"x":736,"y":268},{"type":"mousemove","time":609,"x":748,"y":245},{"type":"mousemove","time":813,"x":767,"y":225},{"type":"mousemove","time":1014,"x":772,"y":217},{"type":"screenshot","time":1539},{"type":"mousemove","time":1796,"x":772,"y":217},{"type":"mousemove","time":1997,"x":779,"y":242},{"type":"mousemove","time":2210,"x":780,"y":246},{"type":"screenshot","time":3053},{"type":"mousemove","time":3597,"x":780,"y":246},{"type":"mousemove","time":3803,"x":746,"y":295},{"type":"mousemove","time":4021,"x":723,"y":338}],"scrollY":1304,"scrollX":0,"timestamp":1571728188900}]
\ No newline at end of file
diff --git a/test/toolbox-title.html b/test/toolbox-title.html
new file mode 100644
index 0000000000000000000000000000000000000000..49abc428998a1a5d9089377135348e25d801a697
--- /dev/null
+++ b/test/toolbox-title.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/esl.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <!-- <script src="ut/lib/canteen.js"></script> -->
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+        </style>
+
+
+
+        <div id="main0"></div>
+
+        <div id="main1"></div>
+
+        <div id="main2"></div>
+
+        <div id="main3"></div>
+
+
+
+
+
+
+
+
+
+        <script>
+        require(['echarts'], function (echarts) {
+            var option = {
+                xAxis: {},
+                yAxis: {},
+                series: {
+                    type: 'line',
+                    data: [[11, 22], [33, 44]]
+                },
+                toolbox: {
+                    show: true,
+                    feature: {
+                        restore: {},
+                        saveAsImage: {},
+                        dataZoom: {},
+                        dataView: {}
+                    }
+                },
+                animation: false
+            };
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'orient: horizontal; top right side',
+                    'Text when hover on toolbox icon should not be outside of the canvas'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+
+
+
+        <script>
+        require(['echarts'], function (echarts) {
+            var option = {
+                xAxis: {},
+                yAxis: {},
+                series: {
+                    type: 'line',
+                    data: [[11, 22], [33, 44]]
+                },
+                toolbox: {
+                    show: true,
+                    feature: {
+                        dataZoom: {},
+                        dataView: {},
+                        restore: {},
+                        saveAsImage: {}
+                    },
+                    left: 10,
+                    bottom: 10
+                },
+                animation: false
+            };
+
+            var chart = testHelper.create(echarts, 'main1', {
+                title: [
+                    'orient: horizontal; bottom left side',
+                    'Text when hover on toolbox icon should not be outside of the canvas'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+
+
+
+        <script>
+        require(['echarts'], function (echarts) {
+            var option = {
+                xAxis: {
+                },
+                yAxis: {
+                },
+                series: {
+                    type: 'line',
+                    data: [[11, 22], [33, 44]],
+                },
+                toolbox: {
+                    show: true,
+                    feature: {
+                        restore: {},
+                        saveAsImage: {},
+                        dataZoom: {},
+                        dataView: {}
+                    },
+                    orient: 'vertical',
+                    left: 5
+                },
+                animation: false
+            };
+
+            var chart = testHelper.create(echarts, 'main2', {
+                title: [
+                    'orient: horizontal; bottom left side',
+                    'Text when hover on toolbox icon should not be outside of the canvas'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+
+
+
+        <script>
+        require(['echarts'], function (echarts) {
+            var option = {
+                xAxis: {},
+                yAxis: {},
+                series: {
+                    type: 'line',
+                    data: [[11, 22], [33, 44]]
+                },
+                toolbox: {
+                    show: true,
+                    feature: {
+                        restore: {},
+                        saveAsImage: {},
+                        dataZoom: {},
+                        dataView: {}
+                    },
+                    orient: 'vertical',
+                    right: 5
+                },
+                animation: false
+            };
+
+            var chart = testHelper.create(echarts, 'main3', {
+                title: [
+                    'orient: horizontal; bottom right side',
+                    'Text when hover on toolbox icon should not be outside of the canvas'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+
+    </body>
+</html>
+