Display Prompt window when hovering over the "a" (link) tag

Question

Is there any way to display a prompt window when hovering over the "a" link tag? I've shown display contents over hover, however the prompt isn't showing when hovering.

.prompt {
  display:none;
}

.prompt .description-box:hover {
  display: contents;
  }

<button class="accordion">Catagories</button>
    <ul class="accordion-content">
          <li>
            <label>
                    <input type="checkbox" name="checkbox" >Item1
            </label>
                    <a class="description-box"href="#">ℹ️</a>
                    <p class="prompt" >This is a prompt</p>
                 
          </li>    

            <li>
                <label>
                    <input type="checkbox" name="checkbox" />Item2
                </label>
            </li>

            <li>
                <label>
                    <input type="checkbox" name="checkbox" />Item3
                </label>
            </li>
    </ul>

Answer 1

You could do this using the onmouseover event built into html tags.

Add an index.js file

function displayPrompt() {
  document.querySelector(".prompt").style.display = "contents"
}

<button class="accordion">Categories</button>
    <ul class="accordion-content">
          <li>
            <label>
                    <input type="checkbox" name="checkbox" >Item1
            </label>
                    <a class="description-box" "href="#" onmouseover="displayPrompt()">ℹ️</a>
                    <p class="prompt">This is a prompt</p>
                 
          </li>    

            <li>
                <label>
                    <input type="checkbox" name="checkbox" />Item2
                </label>
            </li>

            <li>
                <label>
                    <input type="checkbox" name="checkbox" />Item3
                </label>
            </li>
    </ul>

    <script src="./index.js"></script>

.prompt {
  display: none;
}

That's one way of doing

||||||||||||||||||

You could also do it by adding a class to the element by modifying your index.js like so:

function displayPrompt() {
  document.querySelector(".prompt").classList.add(".show")
}

And a 'show' class to your css file

.prompt {
  display: none;
}

.prompt.show {
  display: contents
}

I personally prefer the second way because you don't edit your styles directly from your javascript

Answer 2

You can use opacity and visibility instead to create a soft fading effect on hover. You can also customize the .prompt as per your needs.

.description-box {
  position: relative;
  display: inline-block;
}

.description-box .prompt {
  visibility: hidden;
  width: 120px;
  color: #000;
  text-align: center;
  position: absolute;
  bottom: -2%;
  left: 125%;
  opacity: 0;
  transition: opacity 0.3s;
}

.description-box:hover .prompt {
  visibility: visible;
  opacity: 1;
}

<button class="accordion">Catagories</button>
<ul class="accordion-content">
  <li>
    <label>
         <input type="checkbox" name="checkbox" >Item1
    </label>
    <a class="description-box" href="#">ℹ️
      <span class="prompt">This is a prompt</span>
    </a>
  </li>

  <li>
    <label>
         <input type="checkbox" name="checkbox" />Item2
    </label>
  </li>

  <li>
    <label>
         <input type="checkbox" name="checkbox" />Item3
    </label>
  </li>
</ul>

Answer 3

Non-JavaScript Option 1: Re-order your CSS and place your prompt inside your anchor element.

.description-box:hover .prompt {
  display: contents;
}

And the HTML:

<a class="description-box" href="#">ℹ️<p class="prompt">This is a prompt</p></a>

---

Non-JavaScript Option 2: Create your own prompt with styling, as demonstrated (very simply) with the second li in my snippet.

---

Snippet that includes both of those non-JavaScript options:

.prompt {
  display: none;
}


/* Swap the classes */

.description-box:hover .prompt {
  display: contents;
}


/* Some extra stuff for syling demo */

.promptNEW {
  position: absolute;
  top: 40vh;
  left: 30vw;
  background-color: #ddd;
  border: 1px solid black;
  width: 30vw;
  height: 40vh;
  content: "prompt content";
  display: none;
}

.description-box:hover .promptNEW {
  display: block;
}

<button class="accordion">Catagories</button>
<ul class="accordion-content">
  <li>
    <label><input type="checkbox" name="checkbox" >Item1</label>

    <!-- Put the prompt INSIDE the 'a' element -->
    <a class="description-box" href="#">ℹ️ 
      <p class="prompt" >This is a prompt</p>
    </a>
  </li>

  <!-- Extra to demonstrate another option -->
  <li>
    <label><input type="checkbox" name="checkbox" >ItemNEW</label>
    <a class="description-box" href="#">ℹ️ 
      <p class="promptNEW" >This is a prompt</p>
    </a>
  </li>
  <li>
    <label><input type="checkbox" name="checkbox" />Item2</label>
  </li>

  <li>
    <label><input type="checkbox" name="checkbox" />Item3</label>
  </li>
</ul>

Answer 4

Use JavaScript. Just Trigger the function with an onmouseover event. You can see an example below. Hope this solves your problem.

function a() {
  prompt('What is your name? ')
}

<a onmouseover="a()" href="#">Link</a>

Answer 5

You can solve the problem by creating a div of the link.

.description-box a p {display:none;}

.description-box:hover p{
  display: block;
  }

<button class="accordion">Catagories</button>
    <ul class="accordion-content">
          <li>
            <label>
                    <input type="checkbox" name="checkbox" >Item1
            </label><div class="description-box">
                    <a  href="">ℹ️
                    <p>This is a prompt</p></a></div>
                 
          </li>    

            <li>
                <label>
                    <input type="checkbox" name="checkbox" />Item2
                </label>
            </li>

            <li>
                <label>
                    <input type="checkbox" name="checkbox" />Item3
                </label>
            </li>
    </ul>

Took help from How to make text appear when hover over a href