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

Опубликовано автором

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();
},

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

  • _openHelpPopOver — метод, который открывает popOver:
    /sapui5_tooltip/blob/master/webapp/controller/Main.controller.js
    _openHelpPopOver: function(sText, oElem) {
	this._getPopOver();
	this._setTextPopover(sText);
	if (this._oPopover._oOpenBy !== oElem) {
		this._oPopover.close();
	}
	this._oPopover.openBy(oElem);
},
  • _closePopOver — метод, который закрывает popOver:
    /sapui5_tooltip/blob/master/webapp/controller/Main.controller.js
    _closePopOver: function() {
	if (this._oPopover) {
		this._oPopover.close();
	}
},
  • _getPopOver — метод, в котором мы получаем, либо создаем popOver:
    /sapui5_tooltip/blob/master/webapp/controller/Main.controller.js
    _getPopOver: function() {
	if (!this._oPopover) {
		//создаем фрагмент
		this._oPopover = Fragment.byId("HelpPopover", "HelpPopoverId");
		if (!this._oPopover) {
			this._oPopover = sap.ui.xmlfragment("HelpPopover", "hint.view.fragment.HelpPopover", this);
		}
	}
 
return this._oPopover;
},
  • _setTextPopover — метод, устанавливающий текст всплывающего сообщения:
    /sapui5_tooltip/blob/master/webapp/controller/Main.controller.js
    _setTextPopover: function(sText) {
	var oTxt = sap.ui.core.Fragment.byId("HelpPopover", "HelpTxtId"); //получаем фрагмент по его ID
	oTxt.setHtmlText(sText);
}

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