Jquery实现自定义tooltip示例代码

下面是JQuery实现自定义tooltip示例代码的完整攻略：

1. 获取JQuery库并引入

首先要在网站页面中获取JQuery库并引入到页面中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. CSS样式设置

在html文件中设置CSS样式，并为tooltip元素设置隐藏：

.tooltip {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  width: 100px;
}

3. 实现tooltip代码

示例一：

在页面中创建一个按钮，当鼠标hover到按钮上时，弹出tooltip框显示提示语句。

HTML代码：

<button id="btn1">Hover over me</button>
<div class="tooltip" id="tooltip1">This button will redirect you to a new page.</div>

JQuery代码：

$("#btn1").hover(function() {
  $("#tooltip1").css({
    "display": "block",
    "top": $(this).position().top - 30,
    "left": $(this).position().left + 50
  });
}, function() {
  $("#tooltip1").css("display","none");
});

示例二：

在页面中创建一个图片元素，当鼠标hover到图片上时，以动画效果弹出tooltip框显示图片预览。

HTML代码：

<img src="https://via.placeholder.com/150x150.png?text=Image" class="img-tooltip" />
<div class="tooltip" id="tooltip2"></div>

JQuery代码：

$(".img-tooltip").mouseover(function() {
  var imageSrc = $(this).attr("src");
  $("#tooltip2").css("background-image", "url(" + imageSrc + ")");
  $("#tooltip2").stop().fadeIn(300);
}).mouseleave(function () {
  $("#tooltip2").fadeOut(200);
});

在这个例子中，鼠标hover在图片上时，会获取图片的地址并动态设置到tooltip框的背景中显示。当鼠标离开图片时，tooltip框以淡出动画的方式消失。

至此，完整的JQuery实现自定义tooltip示例代码就介绍完毕了。