Question

我想使用RichTooltip控件为UI5中的每个表格设置工具提示文本。此外，我希望文本格式正确，如果文本包含粗体或斜体html标签，那么它应该以相同的方式显示数据。例如：<form method="post" action=""> <select id="mainDD" data-placeholder="Choose" class="chzn-select" style="width:600px;"> {% for i in json_data.items.values %} <option>{{ i }}</option> {% endfor %} </select> {% for key, values in preprocessed %} <select name="type" id=type> {% for counter, value in values %} <option value="{{ counter }}">{{ value }}</option> {% endfor %} </select> {% endfor %} </form>应以粗体显示text="<b>hello</b> <i>world</i>"，并以斜体显示hello。

Answer 1

不应再使用

RichTooltip，因为不推荐使用其库sap.ui.commons。相反，请转到Popover。如果你真的需要，可以将Popover与onmouseover结合使用。以下是一个示例：https://stackoverflow.com/a/45490191/5846045

然而，由于poor accessibility和低discoverability，隐藏鼠标悬停事件背后的信息在用户体验方面被认为是不好的做法：

工具提示仅限于桌面设备。 [...]他们不应该包含重要信息。它们也不应包含冗余信息。

只能使用工具提示微小的解释性内容。但是，诸如“丰富”工具提示之类的方法会鼓励开发人员隐藏相关信息。

要显示带格式的文字，您可以使用控件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中，必须使用<转义字符<。

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

1 个答案: