SapUI5: Всплывающая подсказка (Tooltip)

Размещен в sapui5 23.05.2018 17:02
Теги: , , ,

sapui5 tooltip

В SapUI5 нет отдельного элемента, позволяющего реализовать всплывающие подсказки (тултип) при наведении мышкой на элемент. ( Или может я плохо искал :) ). Элемента может и нету, но потребность есть, причем очень большая! Так сделаем свои подсказки с "блэкджеком" и тенями :)!

Готовый пример — https://github.com/kannade/sapui5_tooltip.

В sapui5 есть элемент sap.m.Popover, который позволяет создавать разнообразные окна. Сделаем так, чтобы окно вызывалось не при клике, а при наведении мыши!

В представлении нарисуем простую иконку:

/sapui5_tooltip/blob/master/webapp/view/Main.view.xml
<core:icon src="sap-icon://hint" class="infoIcon" color="#031E48" id="iconHint">
	<core:layoutdata>
		<flexitemdata growFactor="1"></flexitemdata>
	</core:layoutdata>
</core:icon>

Определим два события для иконки: События наведения мышки на элемент (mouseenter) и событие выхода мышки из области элемента (mouseleave):

/sapui5_tooltip/blob/master/webapp/controller/Main.controller.js
onAfterRendering: function() {
	//взяли нашу иконку и определили для нее события mouseenter и mouseleave
	var oIcon = this.getView().byId("iconHint");
	oIcon.attachBrowserEvent("mouseenter", this.onMainIcon, this);
	oIcon.attachBrowserEvent("mouseleave", this.onIconMouseLeave, this);
},

При наведении мышки на элемент будет отрабатывать метод onMainIcon, где, в массиве сообщений (который предварительно заполнили в onInit) находим текст, который надо показать во всплывающем окне для данного элемента и открываем PopOver:

/sapui5_tooltip/blob/master/webapp/controller/Main.controller.js
onMainIcon: function(oEvent) {
	for (var i = 0; i < this._message.length; i++) {
		if (this._message[i][1] === oEvent.target.dataset.sapUi) {
			var message = this._message[i][0];
			break;
		}
	}
 
	this._openHelpPopOver(message, oEvent.target);
},

Когда мышку с элемента мы убираем, срабатывает метод onIconMouseLeave и закрываем ранее открытый PopOver:

/sapui5_tooltip/blob/master/webapp/controller/Main.controller.js
onIconMouseLeave: function() {
	this._closePopOver();
},

В контроллере есть еще несколько методов:

Вот так, довольно быстро, можно решить проблему со всплывающими подсказками в SapUI5!

Оставить комментарий: