自定义工具提示跟随鼠标光标 jQuery YACSSTooltip

  • 源码大小:31.49KB
  • 所需积分:1积分
  • 源码编号:19JP-3575
  • 浏览次数:775次
  • 最后更新:2023年06月28日
  • 所属栏目:工具提示
本站默认解压密码:19jp.com 或 19jp_com

简介

另一个jQuery工具提示插件,用于使用中高音or标题在鼠标移动时始终跟随光标的属性。

如何使用它:

1.插入JavaScript文件jquery.YACSSTooltip.min.js在关闭body标记之前,在jQuery库之后。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/jquery.YACSSTooltip.js"></script>

2.在中定义工具提示内容中高音or标题属性。

<img alt="Tooltip Content Here" 
     src="1.jpg"
>

3.将插件连接到国际货币基金组织标记并完成。

$(function() {
  $('img').addTooltip();
});

4.覆盖CSS中的默认工具提示样式。

.YACSSTooltip {
  border: 1px solid #333; 
  background-color: #161616; 
  border-radius: 5px; 
  padding: 5px 0; 
  color: #fff; 
  font-size: 12px Arial;
  max-width: 250px;
  line-break: auto;
  word-break: normal;
  word-spacing: 0px;
  white-space: normal;
  text-align: center;
  verflow-wrap: normal;
}

更新日志:

2022-05-12

  • 修复了名称中可能在同一页面中创建多个基本工具提示的错误

2022-04-19

  • 修复错误,工具提示不是唯一的。

2019-10-02

  • 修复工具提示中URL或超长单词的换行样式

2019-09-20

  • 修复工具提示中URL或超长单词的断字样式

预览截图