JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" class="help" id="MyHelp" value="?" />
<div class ="content">
hjkh
</div>
<div id="helpwindow">
<input type="button" id="close" value="X"/>
Contenu de l'aide
</div>

CSS

.help { background-color: blue;
        color: white;
        border-radius: 50%;
        position: fixed;
        right: 10px;
        }
.content{
  height: 800px;
}
#helpwindow{
  height: 800px;
  position: fixed;
  width: 150px;
  left: 0;
  top: 0;
  background-color: red;
  border: solid 1px grey;
  display: none;
}
.show{ display: block !important; }
#close {
       background-color: grey;
        color: white;
        border-radius: 50%;
        float:right;
        
}

JavaScript

//$(function(){
function ShowHelp(e) {
e.cancelBubble = true;
let element = document.getElementById("helpwindow");
  element.classList.toggle("show");
}
function HideHelp() {
let element = document.getElementById("helpwindow");
  element.classList.remove("show");
}

document.getElementById('MyHelp').addEventListener('click',ShowHelp);
document.body.addEventListener('click',HideHelp);
document.getElementById('close').addEventListener('click',HideHelp);

//});