DESIGN-3951 feat: fineUI的tooltip组件优化

demo/js/base/tip/demo.title.js

@@ -30,6 +30,26 @@ Demo.Title = BI.inherit(BI.Widget, {
                 warningTitle: "自定义title提示效果",
                 text: "自定义title提示效果",
                 textAlign: "center"
+            }, {
+                type: "bi.label",
+                cls: "layout-bg3",
+                height: 50,
+                title: () => "函数返回值作为title提示",
+                text: "title提示支持函数",
+                textAlign: "center"
+            }, {
+                type: "bi.label",
+                cls: "layout-bg4",
+                height: 50,
+                title: function () {
+                    return {
+                        level: "success",
+                        text: "自定义title\n提示效果",
+                        textAlign: "center"
+                    };
+                },
+                text: "title提示支持对象,作为bi.tooltip的props",
+                textAlign: "center"
             }],
             hgap: 300,
             vgap: 20

src/base/single/0.single.js

@@ -23,11 +23,17 @@ BI.Single = BI.inherit(BI.Widget, {
 
     _showToolTip: function (e, opt) {
         opt || (opt = {});
-        var self = this, o = this.options;
+        var o = this.options;
-        var type = this.getTipType() || (this.isEnabled() ? "success" : "warning");
+        var tooltipOpt = {};
-        var title = type === "success" ? this.getTitle() : (this.getWarningTitle() || this.getTitle());
+        var title = this.getTitle();
-        if (BI.isKey(title)) {
+        if (BI.isPlainObject(title)) {
-            BI.Tooltips.show(e, this.getName(), title, type, this, opt);
+            tooltipOpt = title;
+        } else {
+            tooltipOpt.level = this.getTipType() || (this.isEnabled() ? "success" : "warning");
+            tooltipOpt.text = tooltipOpt.level === "success" ? title : (this.getWarningTitle() || title);
+        }
+        if (BI.isKey(tooltipOpt.text)) {
+            BI.Tooltips.show(e, this.getName(), tooltipOpt, this, opt);
             if (o.action) {
                 BI.Actions.runAction(o.action, "hover", o, this);
             }

src/base/single/tip/tip.tooltip.js

@@ -17,7 +17,8 @@ BI.Tooltip = BI.inherit(BI.Tip, {
             text: "",
             level: "success", // success或warning
             stopEvent: false,
-            stopPropagation: false
+            stopPropagation: false,
+            textAlign: "left",
         });
     },
 
@@ -47,7 +48,7 @@ BI.Tooltip = BI.inherit(BI.Tip, {
                 items: BI.map(texts, function (i, text) {
                     return {
                         type: "bi.label",
-                        textAlign: "left",
+                        textAlign: o.textAlign,
                         whiteSpace: "normal",
                         text: text,
                         textHeight: 18
@@ -58,7 +59,7 @@ BI.Tooltip = BI.inherit(BI.Tip, {
             this.text = BI.createWidget({
                 type: "bi.label",
                 element: this,
-                textAlign: "left",
+                textAlign: o.textAlign,
                 whiteSpace: "normal",
                 text: o.text,
                 textHeight: 18,

src/core/controller/controller.tooltips.js

@@ -12,17 +12,25 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
         this.showingTips = {};// 存储正在显示的tooltip
     },
 
-    _createTooltip: function (text, level) {
+    /**
+     *
+     * @param opt
+     * @param opt.text {String} 文本
+     * @param opt.level {String} 级别, success或warning
+     * @param opt.textAlign {String} 文本对齐方式, left, center, right
+     * @returns {*}
+     * @private
+     */
+    _createTooltip: function (opt) {
         return BI.createWidget({
             type: "bi.tooltip",
-            text: text,
+            ...opt,
-            level: level,
             stopEvent: true
         });
     },
 
     // opt: {container: '', belowMouse: false}
-    show: function (e, name, text, level, context, opt) {
+    show: function (e, name, tooltipOpt, context, opt) {
         opt || (opt = {});
         var self = this;
         BI.each(this.showingTips, function (i, tip) {
@@ -30,7 +38,7 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
         });
         this.showingTips = {};
         if (!this.has(name)) {
-            this.create(name, text, level, opt.container || "body");
+            this.create(name, tooltipOpt, opt.container || "body");
         }
         if (!opt.belowMouse) {
             var offset = context.element.offset();
@@ -41,7 +49,6 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
             var top = offset.top + bounds.height + 5;
         }
         var tooltip = this.get(name);
-        tooltip.setText(text);
         tooltip.element.css({
             left: "0px",
             top: "0px"
@@ -84,9 +91,9 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
         return this;
     },
 
-    create: function (name, text, level, context) {
+    create: function (name, tooltipOpt, context) {
         if (!this.has(name)) {
-            var tooltip = this._createTooltip(text, level);
+            var tooltip = this._createTooltip(tooltipOpt);
             this.add(name, tooltip);
             BI.createWidget({
                 type: "bi.absolute",