如何在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標籤的格式化文本

回答

相關問題