如何在UI5中使用RichTooltip显示包含html标签的格式化文本

我想使用RichTooltip控件为UI5中每个表格网格设置工具提示文本。此外，我希望文本格式正确，就像文本包含粗体或斜体html标记一样，那么它应该以相同的方式显示数据。例如：text="<b>hello</b> <i>world</i>"应以斜体显示hello，并以斜体显示world。如何在UI5中使用RichTooltip显示包含html标签的格式化文本

来源

2017-09-27 anitab

首先明确我的疑问是否有可能通过RichTooltip控件来完成，或者是否存在ui5中的其他任何控件？ – anitab

是的，你可以使用''控制它，你可以使用[HTML实体]（https://www.w3schools.com/charsets/ref_html_entities_4.asp）呈现你的HTML。你可以参考[sap.ui.core.HTML]（https://sapui5.hana.ondemand.com/#/sample/sap.ui.core.sample.Html/preview） – inizio

RichTooltip不应再使用，因为其库sap.ui.commons已弃用。相反，去Popover。如果你真的需要，你可以结合Popover和onmouseover。这里有一个例子：https://stackoverflow.com/a/45490191/5846045

然而，鼠标悬停事件背后隐藏的信息被认为是不好的做法，因为的poor accessibility和低discoverability UX方面：

工具提示仅限于桌面设备。 [...]他们不应该包含关键信息。他们也不应该包含多余的信息。

工具栏只应用于提供一个很小的解释性内容。但是，像“丰富”工具提示的方法鼓励开发人员隐藏相关信息。

要显示格式的文本，您可以使用控制FormattedText或HTML：

sap.ui.require([ 
 
    "sap/m/FormattedText", 
 
    "sap/ui/core/HTML" 
 
], function(FormattedText, HTML) { 
 

 
    new FormattedText({ 
 
    htmlText: "<strong>Hello</strong> <em>world</em>" 
 
    }).placeAt("content"); 
 

 
    new HTML({ 
 
    content: "<b>Hello</b> <i>world</i>" 
 
    }).placeAt("content"); 
 

 
});

<script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"></script> 
 
<body class="sapUiBody" id="content"></body>

注：在xmlView中，字符<必须与转义<。

来源

2017-09-30 14:13:57 boghyon

非常感谢，它清除了我所有的怀疑与此主题 – anitab

任何人都可以帮助我得到使用弹出和标注控件显示工具提示之间的确切区别。我将非常感谢关于这个概念在处理和性能方面的详细解释 – anitab

@anitab更好地为此打开一个单独的问题。但* IMO *，由于维护成本，应避免不推荐使用的控件（例如RichTooltips和[Callout]（https://openui5.hana.ondemand.com/#/api/sap.ui.commons.Callout））如果它们以任何方式略胜于x。 – boghyon

如何在UI5中使用RichTooltip显示包含html标签的格式化文本

回答

相关问题