From c637343ad4f4cf9e9c51d0b26828b1a848fdd392 Mon Sep 17 00:00:00 2001 From: zsmj Date: Tue, 28 Jun 2022 11:32:51 +0800 Subject: [PATCH] =?UTF-8?q?DESIGN-3951=20feat:=20fineUI=E7=9A=84tooltip?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/base/tip/demo.title.js | 22 ++++++++++++++++++++- src/base/single/0.single.js | 16 ++++++++++----- src/base/single/tip/tip.tooltip.js | 7 ++++--- src/core/controller/controller.tooltips.js | 23 ++++++++++++++-------- 4 files changed, 51 insertions(+), 17 deletions(-) diff --git a/demo/js/base/tip/demo.title.js b/demo/js/base/tip/demo.title.js index 44a5bdc23..5a983068d 100644 --- a/demo/js/base/tip/demo.title.js +++ b/demo/js/base/tip/demo.title.js @@ -30,10 +30,30 @@ 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 }; } }); -BI.shortcut("demo.title", Demo.Title); \ No newline at end of file +BI.shortcut("demo.title", Demo.Title); diff --git a/src/base/single/0.single.js b/src/base/single/0.single.js index bb926e9a2..f244f200f 100644 --- a/src/base/single/0.single.js +++ b/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 type = this.getTipType() || (this.isEnabled() ? "success" : "warning"); - var title = type === "success" ? this.getTitle() : (this.getWarningTitle() || this.getTitle()); - if (BI.isKey(title)) { - BI.Tooltips.show(e, this.getName(), title, type, this, opt); + var o = this.options; + var tooltipOpt = {}; + var title = this.getTitle(); + if (BI.isPlainObject(title)) { + 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); } diff --git a/src/base/single/tip/tip.tooltip.js b/src/base/single/tip/tip.tooltip.js index ca206a849..3276b96f6 100644 --- a/src/base/single/tip/tip.tooltip.js +++ b/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, diff --git a/src/core/controller/controller.tooltips.js b/src/core/controller/controller.tooltips.js index 5e4db152b..2e126b424 100644 --- a/src/core/controller/controller.tooltips.js +++ b/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, - level: level, + ...opt, 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",