Question 184319 in CSS Question posted in
Some basic documentation can be found here.

Css – Trigger popover on hover

I have a form where I want to show a popover helpbox on hovering over the info div:
Input

The info div and the popover are as follows (parent div is position: relative):

<div popovertarget="function-help" class="absolute cursor-help right-1 top-0 bottom-0 m-auto rounded-full border-2 border-cyan-400 text-cyan-400 w-1 h-1 p-2 flex justify-center items-center">i</div>
<div id="function-help" popover>Here's how to input a function:</div>

I know how to do it with a button or input, but how to do it with a div, and on hovering?

How do I show the popover when the user hovers over the info div, and hide it when he leaves?

Thanks in advance!

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Ok, thanks to @Sai Manoj's helpful answer, I got that I could use the mouseenter and mouseleave methods of a div to trigger the popover.

    So here's my code:

    document.getElementById('info-tooltip').onmouseenter = _ => document.getElementById('function-help').showPopover()
document.getElementById('info-tooltip').onmouseleave = _ => document.getElementById('function-help').hidePopover()
    .wrapper {
  position: relative;
  width: max-content;
}
label {
  display: inline-block;
  width: 10 rem;
}
#info-tooltip {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 4px;
  cursor: help;
  margin: auto;
  border-radius: 100px;
  border: 2px solid cyan;
  color: cyan;
  width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#function-help:popover-open {
  position: absolute;
  bottom: 0;
  inset: unset;
}
    <div class="wrapper">
    <label for="inputFunction">f(x) = </label>
    <input type="text" id="inputFunction">
    <div id="info-tooltip" popovertarget="function-help">i</div>
    <div id="function-help" popover>Here's how to use this function:</div>
</div>

    Note that you could further style the popover, but you would most probably want to use position: absolute (since default is position: fixed) and inset: unset.


  2. 0

    As per my understanding you are trying to display a tooltip using div when user hovers on i. If that’s the case you can use EventListener to show/hide div as per your requirement

    var targetElement = document.querySelector('.icon');
var tooltip = document.getElementById('tooltip');

targetElement.addEventListener('mouseenter', function() {
  tooltip.style.display = 'block';
});

targetElement.addEventListener('mouseleave', function() {
  tooltip.style.display = 'none';
});
    .container {
  position: relative;
  display: inline-block;
}

.container input {
  padding-left: 30px;
}

.container .icon {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #39a9db;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: help;
}

.tooltip {
  display: none;
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  z-index: 1;
  right: 0px;
  top: 25px
}
    <div class="container">
 <h3>f(x) = </h3>
</div>
<div class="container">
  <input type="text">
  <div class="icon">i</div>
  <div class="tooltip" id="tooltip">This is a tooltip</div>
</div>
    Login or Signup to reply.
  3. 0

    I realized my confusion. The Popover API is an experimental feature that doesn’t have a wide browser compatibility.

    My answer allows you to have multiple popovers on the same page.

    It uses querySelectorAll to find all of the popovertarget elements. Then it loops through each generating a variable to hold the popover element. Then on mouseover it shows it and on mouseout it hides it.

    Personally I would use a plugin that mimics the popover as it will have cross browser compatibility.

    const popover = document.querySelectorAll("[popovertarget]");

popover.forEach((e) => {
  const target = document.querySelector("#" + e.getAttribute("popovertarget"));
  e.addEventListener("mouseover",()=>{
    target.showPopover();
  });
  
  e.addEventListener("mouseout",()=>{
    target.hidePopover();
  });
});
    <div popovertarget="function-help">popME</div>
<div id="function-help" popover>Here's how to input a function:</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search