JavaScript How do I disable right click with a tooltip appearing when clicked?

[Edrol97]

Hi all, I've seen some posts recommending this shouldn't be done on Google, but want it for my website as I think it's a cool feature to put a copyright into but also maybe a quirky little message. Does anyone have ideas of how to do this? I know I will add an eventlistener of sorts and an onclick event but I'm not really sure further from this.

 

[JimmysNetwork]

Hi all, I've seen some posts recommending this shouldn't be done on Google, but want it for my website as I think it's a cool feature to put a copyright into but also maybe a quirky little message. Does anyone have ideas of how to do this? I know I will add an eventlistener of sorts and an onclick event but I'm not really sure further from this.

Hello,

So you can do this a couple different ways. One way is an example below. This technique does not prevent users from accessing the page's source code or elements through developer tools. For sensitive content, consider server-side protections or DRM solutions.

<div id="tooltip" style="display: none;">Right-click is disabled! Your copyright info here</div>

#tooltip {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  z-index: 1000;
}

document.addEventListener("contextmenu", function (event) {
  // Prevent the default context menu
  event.preventDefault();
 
  // Get the tooltip element
  const tooltip = document.getElementById("tooltip");
 
  // Set the tooltip position near the cursor
  tooltip.style.left = `${event.pageX}px`;
  tooltip.style.top = `${event.pageY}px`;
 
  // Display the tooltip
  tooltip.style.display = "block";

  // Hide the tooltip after 2 seconds or set your own time you would like it to show for here.
  setTimeout(() => {
    tooltip.style.display = "none";
  }, 2000);
});

Hope this solution helps! Let us know if you need anything else!

 

[Zakwan@MTH]

Hey there!
If you want to add a fun message when users right-click on your site here is one-way to do it:

1. HTML:
Add a hidden tooltip:

<div id="tooltip" style="display: none;">Right-click is disabled! Your copyright info here.</div>

2. CSS:
Here is how to style the tooltip:

#tooltip { 
  position: fixed; 
  background: rgba(0, 0, 0, 0.8); 
  color: #fff; 
  padding: 5px 10px; 
  border-radius: 5px; 
  font-size: 12px; 
  z-index: 1000; 
}

3. JavaScript:
Here is the script to display the tooltip on right-click:

document.addEventListener("contextmenu", (event) => { 
  event.preventDefault(); 
  const tooltip = document.getElementById("tooltip"); 
  tooltip.style.left = `${event.pageX}px`; 
  tooltip.style.top = `${event.pageY}px`; 
  tooltip.style.display = "block"; 
  setTimeout(() => tooltip.style.display = "none", 2000); 
});

Do tell if you require more of my help 🙂