How to disable tooltips in Fiori?

[Anton_Mavrin]

Recently, in the community, a question was asked about how to remove annoying, bloody tooltips from Fiori tiles and, probably, other Fiori  UI elements when recording them with SAP Enable Now. I responded with a bunch of lines of strange-looking code and provided no instruction on how to apply it. In this short post, I want to fix my mistake.

Problem

Tooltips are captured when recording Fiori, and they aren't attractive

Solution

This issue was fixed in the latest SAP Enable Now release. Tooltips are no longer appearing due to the disabled hover event during the recording. If you have SAP Enable Now Cloud or recently upgraded your SAP Enable Now On-Premise to the latest version (2211), stop reading this blog post.

Solution for SAP Enable Now versions older than 2211

Copy the code below

//This will remove tooltips from Fiori Tiles

function getFLPTooltipsOut() {

	

const mutationObserver = new MutationObserver((entries) => {

    entries[0].target.removeAttribute('title')

  }

);



const panel = document.querySelector('body');



mutationObserver.observe(panel, {

  attributes: true,

  subtree: true,  

  attributeFilter: ["title"],

});

}



// OPTIONAL: Remove titles as tooltips from the fields

function cleanTitle() {

	getFLPTooltipsOut();

    setTimeout(() => {

        document.querySelectorAll('*').forEach(function(node) {

  try {

      node.removeAttribute('title')

  } catch(e) {}

})

    }, 1000)}

    

//initial cleanup

cleanTitle();



//run cleanup on every page update

window.onhashchange = cleanTitle;

Install the browser extension User JavaScript and CSS, and create the new rule there for your Fiori Launchpad URL. Paste the code in the JS section.

Check if the extension is active when you open the Fiori Launchpad URL.

 

Done. There will be no tooltips any longer.

P.S. You can also use the SAP Companion Extension for injecting the code into the Fiori Launchpad, but the configuration process will be slightly longer.