how to display formatted text containing html tags using RichTooltip in UI5

问题

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="<b>hello</b> <i>world</i>" should display hello in bold and world in italics.

回答1:

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:

Tooltips are limited to desktop devices. [...] They should never contain critical information. They should also not contain redundant information.

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

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>

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

来源：https://stackoverflow.com/questions/46439649/how-to-display-formatted-text-containing-html-tags-using-richtooltip-in-ui5

标签

sapui5