如何覆蓋listItem圖標工具提示？

Question

我正在嘗試更改位於核心：ListItem中的圖標的工具提示。

listItem的tooltip屬性正在更改整個項目的tooltip，這不是我正在尋找的東西。

<core:ListItem icon="sap-icon://message-error" tooltip="someTooltip" />

Answer 1

您需要擴展core: ListItem或者可以使用sap.m.CustomListItem解決問題，並指定圖標工具提示。

view.xml用

<List items="{/items}">
  <CustomListItem>
    <HBox>
      <core:Icon size="2rem" width="50px" tooltip="{tooltipInfo}" src="{icon}" />               
      <VBox>
        <Link text="{title}"/>
        <Label text="{type}"/>
      </VBox>
    </HBox>
  </CustomListItem>
</List>

Controller.js

var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
  "items": [
     { "tooltipInfo": "Group1", "icon": "sap-icon://hint", "type": "Monitor", "title": "Tiles: a modern UI design pattern for overview & navigation."},
     { "tooltipInfo": "Group2", "icon": "sap-icon://inbox", "number": "89", "title": "Approve Leave Requests", "info": "Overdue", "infoState": "Error" },
     { "tooltipInfo": "Group3", "icon": "sap-icon://email", "type": "Create", "title": "Create Leave Requests", "info": "28 Days Left", "infoState": "Success" },
     { "tooltipInfo": "Group4", "icon": "sap-icon://travel-expense-report", "number": "281", "numberUnit": "euro", "title": "Travel Reimbursement", "info": "1 day ago" },
     { "tooltipInfo": "Group5", "icon": "sap-icon://loan", "number": "2380", "numberUnit": "euro", "title": "My Salary", "info": "8 days ago" },
     { "tooltipInfo": "Group6", "icon": "sap-icon://lab", "number": "1", "numberUnit": "Invention", "title": "Test Lab Reports","info": "8 Days Ago" }]
});
this.getView().setModel(oModel);

產量

Answer 2

工具提示只會顯示在下拉列表中。

 <!DOCTYPE HTML> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta charset="UTF-8"> <title>Test</title> <script id="sap-ui-bootstrap" type="text/javascript" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.table" data-sap-ui-xx-bindingSyntax="complex"> </script> <script id="oView" type="sapui5/xmlview"> <mvc:View height="100%" controllerName="myView.Template" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"> <Select> <core:ListItem icon="sap-icon://accept" tooltip="someTooltip" /> </Select> </mvc:View> </script> <script> sap.ui.define([ 'sap/ui/core/mvc/Controller', ], function(Controller) { "use strict"; var oController = Controller.extend("myView.Template", { }); return oController; }); var oView = sap.ui.xmlview({ viewContent: jQuery('#oView').html() }); oView.placeAt('content'); </script> </head> <body class="sapUiBody" role="application"> <div id="content"></div> </body> </html>

如何覆蓋listItem圖標工具提示？

問題描述

2 個解決方案

解決方案1
1 已采納 2019-09-04 14:35:32

解決方案2
0 2019-09-01 03:21:26

如何覆蓋listItem圖標工具提示？

問題描述

2 個解決方案

解決方案1 1 已采納 2019-09-04 14:35:32

解決方案2 0 2019-09-01 03:21:26

解決方案1
1 已采納 2019-09-04 14:35:32

解決方案2
0 2019-09-01 03:21:26