How to change the tooltip of embedded Icons/Marker in the SAPUI5 controls?

Usually we change the default tooltip of icons according to our need. In normal Icon control we get the tooltip property to change the tooltip text as well. Then why this blog? The real issue comes when we want to change the tooltip of the icon which is part of some other control, there we do not have separate property to change the tooltip text.

So to change tooltip of the embedded icons / markers I have found a solution and want to share with you all.

Here I am going to take the example of ObjectPageHeader control; part of ObjectPageLayout used to display title, description, image and also contains some markers.

In the image you can see 2 marker icons, Favorite marker and Flagged marker. In the below image you can see their default tooltip, Favorite for star Icon and Fagged for flag icon.

Now we will try to get the Ids of these marker icons to change the tooltip text. For that we have to assign an ID to the ObjectPageHeader control.

Now in debug mode go to console tab and get the ObjectPageHeader control source by Id(eg: this.getView().byId(“headerForTest”)). Here we get all the properties, aggregations and binding information. Here you can also notice’ _oFlafIcon’ and ‘_oFavIcon’, highlighted in yellow box.

Now expand _oFavIcon , you can easily notice the tooltip in mAggregations section and the sId of the Icon as well.

So now you can simply set the tooltip of Favorite icon to any text you want using sId.
You can ignore the View id and take ObjectPageHeader Id if you are changing the tooltip in the same view controlle.
Eg: this.getView().byId(“headerForTest-favorite”).setTooltip(“My Favorite Icon”);

Similarly, change the tooltip of flagged marker as well and we are done.

So in similar fashion we can change the tooltip of any embedded icon. Moreover, we can change the property of any embedded control that is not directly available in the parent control.