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

本文介绍了如何在 UI5 中使用 RichTooltip 显示包含 html 标签的格式化文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I want to set tooltip text for each grid of table in UI5 using RichTooltip control. Also I want the text to be proper formatted like if text containing bold or italic html tags, then it should display the data in same fashion. E.g.: text="hello world" should display hello in bold and world in italics.

推荐答案

RichTooltip 不应再使用，因为其库 sap.ui.commons 已弃用.相反，请选择 Popover.如果确实需要，您可以将 Popover 与 onmouseover 结合使用.下面是一个例子:https://stackoverflow.com/a/45490191/5846045

RichTooltip should not be used anymore since its library sap.ui.commons is deprecated. Instead, go for the Popover. You can combine Popover with onmouseover if you really have to. Here is an example: https://stackoverflow.com/a/45490191/5846045

尽管如此，由于较差的可访问性和低可发现性:

Nevertheless, hiding information behind the mouseover event is considered bad practice in terms of UX because of poor accessibility and low discoverability:

工具提示仅限于桌面设备.[...] 它们永远不应该包含关键信息.它们也不应该包含冗余信息.

Toolitps 应该只用于呈现微小的解释性内容.然而，诸如丰富"工具提示之类的方法会鼓励开发者隐藏相关信息.

Toolitps should only be used to present a tiny explanatory content. Approaches like "rich" tooltips, however, encourage developers to hide relevant information.

要显示格式化文本，您可以使用控件FormattedText 或 HTML:

To display formatted text, you can use the control FormattedText or 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 中，字符 < 必须用 < 转义.

Note: In an XMLView, the character < has to be escaped with <.

这篇关于如何在 UI5 中使用 RichTooltip 显示包含 html 标签的格式化文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！