In my application, there is a button with the ID #download_setup. Currently, an AJAX call is triggered upon clicking this button. However, there are certain users for whom I need to prevent this AJAX download and instead display a tooltip saying "you don't have permission to download."
I tried displaying the tooltip on click using the code below, but the download still gets initiated:
$('#download_setup').on({
"click": function(e) {
$(this).tooltip({ items: "#download_setup", content: "Displaying on click"});
$(this).tooltip("open");
e.preventDefault();
},
"mouseout": function() {
$(this).tooltip("disable");
}
});
When I added CSS to prevent the click event from firing, the tooltip also stopped working. I only want the tooltip to be displayed on click or mouseover without triggering the AJAX action. Here's the CSS I used:
#download_setup{
pointer-events:none;
opacity: 0.5;
}