javascript [工具提示]通过JQuery #js简单的工具提示

Posted 2021-05-04

.section {

&__tooltip {
    border-bottom: 1/@em dashed blue;
    color: blue;

    &:hover {
      cursor: help;
    }
  }

  &__is-tooltip-visible { 
    position: absolute;
    display: none;
    padding: 1em;
    width: 320px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: rgb(102, 102, 102) 0 0 4.8px 0;
  }
}

$(document).ready(function() {
  
  var toolTip  = ".section__tooltip";
  var tVisible = "section__is-tooltip-visible";
  
  $(toolTip)
    .hover(
      function() {
        var title = $(this).attr("title");
        $(this)
          .data("tipText", title)
          .removeAttr("title");
        $("<p class=" + tVisible + "></p>")
          .text(title)
          .appendTo("body")
          .fadeIn(300);
      },
      function() {
        $(this).attr("title", $(this).data("tipText"));
        $("." + tVisible).remove();
      }
    )
    .mousemove(function(e) {
      var mousex = e.pageX + 20; //Get X coordinates
      var mousey = e.pageY + 10; //Get Y coordinates
      $("." + tVisible).css({ top: mousey, left: mousex });
    });
});