JSFiddle - React, Tailwind, and code Playground

by khushboo097

HTML

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
<div id="editor" class="tooltip">
<div id="test" class="tooltiptext">
here see
<!-- </div> -->
</div>

</div>
<!-- <div class="tooltip"> -->

CSS

#editor {
  height: 50px;
  margin-top: 70px;
}
body{
  margin-top: 50px;
}

.ql-omega::after {
  content: url(https://img.icons8.com/windows/32/000000/help.png);
  opacity: 1;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

JavaScript

var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike','omega'],        // toggled buttons
 
];

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

/* var toolbar = quill.getModule('toolbar');
toolbar.addHandler('omega', function() {
  console.log('omega')
});

*/
var node = 'msg';
var customButton = document.querySelector('.ql-omega');
customButton.addEventListener('mouseenter', function(node) {
  document.getElementsByClassName('tooltip')[0].getElementById('test').style.visibility = "visible";
});
customButton.addEventListener('mouseleave', function(node) {
  document.getElementById('test').style.visibility = "hidden";
});