html悬浮窗注释

需要加上悬浮注释的内容，用这些东西括起来：

  <p style="margin-top: 10px;">

    无关紧要的内容    <span class="popup-tip" onclick="togglePopup(event)">

      需要注释的文本

      <span class="popup-content">具体显示的注释内容</span>

    </span>

    无关紧要的内容

  </p>

再在这段文本底下加上：

<script>

    function togglePopup(event) {

      // 关闭其他已打开的

      document.querySelectorAll('.popup-tip.active').forEach(function(el){

        if (el !== event.currentTarget) el.classList.remove('active');

      });

      // 当前弹窗开关

      event.currentTarget.classList.toggle('active');

      // 阻止冒泡

      event.stopPropagation();

    }

    // 点击空白关闭

    document.addEventListener('click', function(){

      document.querySelectorAll('.popup-tip.active').forEach(function(el){

        el.classList.remove('active');

      });

    });

  </script>