<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<!-- Make sure to bootstrap from a specific UI5 version. DO NOT rely on the latest CDN release. The below `src` is for testing and demos only. -->
<script id="sap-ui-bootstrap"
src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
data-sap-ui-async="true"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-resourceroots='{ "demo": "./" }'
data-sap-ui-xx-waitfortheme="init"
></script>
</head>
<body id="content" class="sapUiBody sapUiSizeCompact">
<div style="height: 100%;"
data-sap-ui-component
data-id="rootComponentContainer"
data-name="demo"
data-height="100%"
data-settings='{ "id": "rootComponent" }'
></div>
</body>
</html>
sap.ui.define([
"sap/ui/core/UIComponent",
], function(UIComponent) {
"use strict";
return UIComponent.extend("demo.Component", {
metadata: {
interfaces: [
"sap.ui.core.IAsyncContentCreation",
],
manifest: "json",
},
init: function() {
UIComponent.prototype.init.apply(this, arguments);
this.getRouter().initialize();
}
});
});
{
"_version": "1.60.0",
"start_url": "index.html",
"sap.app": {
"id": "demo",
"type": "application",
"title": "Demo",
"description": "Sample Code",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"config": {
"sapFiori2Adaptation": true
},
"dependencies": {
"minUI5Version": "1.108",
"libs": {
"sap.ui.core": {},
"sap.m": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {},
"rootView": {
"viewName": "demo.view.App",
"id": "rootView",
"type": "XML",
"async": true
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"async": true,
"type": "View",
"viewType": "XML",
"path": "demo.view",
"controlId": "rootApp",
"controlAggregation": "pages",
"transition": "slide",
"bypassed": {
"target": "notFound"
},
"homeRoute": "home"
},
"routes": [
{
"name": "home",
"pattern": "",
"target": "home",
"titleTarget": "home"
}
],
"targets": {
"home": {
"id": "homeView",
"name": "Home",
"transition": "fade",
"level": 1
},
"notFound": {
"name": "Home",
"transition": "slide",
"level": 98
}
}
}
}
}
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" displayBlock="true">
<App id="rootApp" autoFocus="false">
<pages>
<!-- Navigated views will be placed in here -->
</pages>
</App>
</mvc:View>
<mvc:View controllerName="demo.controller.Home"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true">
<Page id="homePage" title="Home">
<Button id="target"
type="Transparent"
icon="sap-icon://cursor-arrow"
iconFirst="false"
class="sapUiTinyMargin"
text="mouseover Here"
>
<dependents>
<ResponsivePopover id="popover" showHeader="false">
<content>
<Avatar
src="https://openui5.org/654aad3012a144881ab07c0bbdd26eb8/phenix_red.svg"
class="sapUiSmallMargin"
displaySize="XL"
imageFitType="Contain"
/>
</content>
</ResponsivePopover>
</dependents>
</Button>
</Page>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller",
], function(Controller) {
"use strict";
return Controller.extend("demo.controller.Home", {
onInit: function () {
this._myDelegate = {
onmouseover: this._showPopover,
onmouseout: this._clearPopover,
};
this.byId("target").addEventDelegate(this._myDelegate, this);
},
_showPopover: function () {
this._timeId = setTimeout(() => {
this.byId("popover").openBy(this.byId("target"));
}, 500);
},
_clearPopover: function () {
clearTimeout(this._timeId);
this.byId("popover")?.close();
},
onExit: function() {
this._clearPopover();
this.byId("target").removeEventDelegate(this._myDelegate);
},
});
});