How can I create a clickable image map with visible tooltip on hover?

[felicstt]

I'm trying to create a point on an image map that is clickable and has a tooltip that appears upon hover, I'd like that tooltip to then contain information as well as a link

I'm not a web developer but I'm learning as I go along with building this, I've been using various forums and ChatGPT this is what I have so far. please any help would be tremendous!

<div id="element"><a href="#" onclick="toggleTooltip('tooltip')">Map Point</a>
<div class="tooltip" id="tooltip">
<p>This is the additional text within the tooltip. <a href="https://example.com" class="highlight">Their Website</a> for more information.</p>
</div>
</div>
<div class="image-container"><img src="4.png" alt="Map" usemap="#image-map" />
<div class="tooltip" id="image-tooltip"><a href="#" onclick="toggleTooltip('tooltip')">Link</a></div>
<map name="image-map">
<area target="" alt="" title="" href="#" coords="50,50,100,100" shape="rect" onmouseover="showTooltip('image-tooltip')" onmouseout="hideTooltip('image-tooltip')" />
</map></div>
<style><!--
.image-container {
position: relative;
display: inline-block;
}

.tooltip {
visibility: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #555;
color: #fff;
padding: 5px;
border-radius: 6px;
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
}

.tooltip a {
visibility: visible;
color: #fff;
text-decoration: none;
}

.image-container:hover .tooltip {
visibility: visible;
opacity: 1;
}

.clickable-area {
position: absolute;
top: 50px;
left: 50px;
width: 100px; /* Adjust the width as needed */
height: 100px; /* Adjust the height as needed */
background-color: transparent;
}
--></style>
<script>// <![CDATA[
// Find the tooltip element
var tooltip = document.getElementById('tooltip');

// Function to show the tooltip
function showTooltip(tooltipId) {
var tooltip = document.getElementById(tooltipId);
tooltip.style.visibility = 'visible';
}

// Function to hide the tooltip
function hideTooltip(tooltipId) {
var tooltip = document.getElementById(tooltipId);
tooltip.style.visibility = 'hidden';
}

// Function to toggle the tooltip visibility
function toggleTooltip(tooltipId) {
var tooltip = document.getElementById(tooltipId);
tooltip.style.visibility = tooltip.style.visibility === 'visible' ? 'hidden' : 'visible';
}
// ]]></script>

[NomtechSolution]

Your code looks mostly correct, but there are a few adjustments you can make to achieve the desired functionality of a clickable point on an image map with a tooltip that appears upon hover. Here's an updated version of your code with the necessary modifications:

<div class="image-container">
  <img src="4.png" alt="Map" usemap="#image-map" />
  <div class="tooltip" id="image-tooltip">
    <a href="#" onclick="toggleTooltip('tooltip')">Link</a>
  </div>
  <map name="image-map">
    <area target="" alt="" title="" href="#" coords="50,50,100,100" shape="rect"
      onmouseover="showTooltip('image-tooltip')" onmouseout="hideTooltip('image-tooltip')" />
  </map>
</div>

<style>
  .image-container {
    position: relative;
    display: inline-block;
  }

  .tooltip {
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #555;
    color: #fff;
    padding: 5px;
    border-radius: 6px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .tooltip a {
    visibility: visible;
    color: #fff;
    text-decoration: none;
  }

  .image-container:hover .tooltip {
    visibility: visible;
    opacity: 1;
  }
</style>

<script>
  // Find the tooltip element
  var tooltip = document.getElementById('tooltip');

  // Function to show the tooltip
  function showTooltip(tooltipId) {
    var tooltip = document.getElementById(tooltipId);
    tooltip.style.visibility = 'visible';
  }

  // Function to hide the tooltip
  function hideTooltip(tooltipId) {
    var tooltip = document.getElementById(tooltipId);
    tooltip.style.visibility = 'hidden';
  }

  // Function to toggle the tooltip visibility
  function toggleTooltip(tooltipId) {
    var tooltip = document.getElementById(tooltipId);
    tooltip.style.visibility = tooltip.style.visibility === 'visible' ? 'hidden' : 'visible';
  }
</script>

[felicstt]

Hello, thank you for the help! 

I'm trying to make multiple clickable points for points of interest around the picture map. I'd like a tooltip to appear only when hovering over the specific coordinates where the clickable points are. I'd like the tooltip to have additional information as well as a clickable link after hovering over it.

If you could help me with this, that would be tremendous!

[umair0771]

where to put this code.....

bro please tell me How i can disable add to cart button (alongwith whole process) while using a rental product.... There should be showing like regular price rate and weekend price rate....

I shall be very thankful to you.