How can I create a Help popup

Question

I want to add a small box next to a question on a form I am asking which when clicked will pop up with a box of text for help about the question. How can i add some java script to create a Pop-up box that will appear when clicked rather than using on mouse over

How if you wanted it on focus? With that, it will show the popup when clicked and then disappear when you click somewhere else. Are you ok with that? — Umair Khan, Feb 19 '17 at 20:22
Or you can consider using the ``title`` to help you. see [How to change the style of the title attribute inside an anchor tag?](https://stackoverflow.com/q/2011142/9935654) — Carson, Sep 09 '21 at 03:34

score -1 · Accepted Answer · answered Feb 19 '17 at 20:38

Design it as you like.

Note that you can add several help popups. Just add class="help" and a title containing the help text.

var helpBox = document.getElementById("helpBox");
var helpElements = document.getElementsByClassName("help");

for (var i = 0; i < helpElements.length; i++) {
  helpElements[i]._helpText = helpElements[i].title;
  helpElements[i].removeAttribute("title");
  
  helpElements[i].onclick = function(e) {
    helpBox.style.display = "block";
    helpBox.innerHTML = "<span id='close' title='Close'>X</span>" +
        e.target._helpText;
    
    helpBox.children[0].onclick = function() {
      helpBox.style.display = "none";
    }
  }
}

body {
  background-color: #f4f4f4;
  font-family: sans-serif;
}

.help {
  cursor: help;
}

#helpBox {
  position: absolute;
  top: 100px;
  display: none;
  width: 300px;
  left: 50%;
  margin-left: -150px;
  border: 1px solid gray;
  padding: 10px;
  background-color: white;
  z-index: 1000;
}

#helpBox #close {
  float: right;
  cursor: pointer;
  background-color: red;
  color: white;
  padding: 0 6px;
}

<span class="help" title="Help text">Help</span>
<div id="helpBox"></div>

How can I create a Help popup

1 Answers1