当前位置:
首页
正文

在 jQuery 中创建工具提示（无需插件！）

更新时间: 2023-04-05 09:24:44  作者: 佚名

一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡/ 赠书活动

目前，正在 星球 内带小伙伴们做第一个项目：全栈前后端分离博客项目，采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4，手把手，前端 + 后端全栈开发，从 0 到 1 讲解每个功能点开发步骤，1v1 答疑，陪伴式直到项目上线，目前已更新了 204 小节，累计 32w+ 字，讲解图：1416 张，还在持续爆肝中，后续还会上新更多项目，目标是将 Java 领域典型的项目都整上，如秒杀系统、在线商城、IM 即时通讯、权限管理等等，已有 870+ 小伙伴加入，欢迎点击围观 。

在这篇文章中，我们将讨论如何使用 jQuery 和 HTML 而不是插件来创建工具提示，以获得更轻松的方法。

背景

最近，我正在经历一个为我的网格创建工具提示的情况。众所周知，有很多插件可用于生成工具提示。但我想手动创建它们。

使用代码

首先，我们将创建一个页面和一个 HTML 表格。 


 <!DOCTYPE html>
<html>
<head>
    <title>Create Tooltip Without Any Plugins</title>
    <script src="jquery-2.0.2.min.js"></script>
</head>
<body>
    <table class="table" border="1" style="width: 100%">
        <tr>
            <td>Sibi</td>
            <td>Ajay</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Ansu</td>
            <td>Akhil</td>
            <td>94</td>
        </tr>
        <tr>
            <td>Shanto</td>
            <td>Libin</td>
            <td>80</td>
        </tr>
    </table>
</body>
</html>

现在，如果您运行您的页面，您可以看到该表。现在，我们将把我们的脚本添加到页面中。 


 <!DOCTYPE html>
<html>
<head>
    <title>Create Tooltip Without Any Plugins</title>
    <script src="jquery-2.0.2.min.js"></script>
</head>
<body>
    <table class="table" border="1" style="width: 100%">
        <tr>
            <td>Sibi</td>
            <td>Ajay</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Ansu</td>
            <td>Akhil</td>
            <td>94</td>
        </tr>
        <tr>
            <td>Shanto</td>
            <td>Libin</td>
            <td>80</td>
        </tr>
    </table>
</body>
</html>

这里我们所做的是在 mouseover 事件中为 <td> 元素附加 title 属性。

完整代码 


 <!DOCTYPE html>
<html>
<head>
    <title>Create Tooltip Without Any Plugins</title>
    <script src="jquery-2.0.2.min.js"></script>
</head>
<body>
    <table class="table" border="1" style="width: 100%">
        <tr>
            <td>Sibi</td>
            <td>Ajay</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Ansu</td>
            <td>Akhil</td>
            <td>94</td>
        </tr>
        <tr>
            <td>Shanto</td>
            <td>Libin</td>
            <td>80</td>
        </tr>
    </table>
</body>
</html>

结论

我是否遗漏了您认为需要的任何内容？你在编程生活中遇到过这个问题吗？我希望你喜欢这篇文章。请分享您宝贵的建议和反馈。

到你了。你怎么认为？

博客不是没有评论的博客，但请尽量切题。如果您有与本文无关的问题，最好将其发布到 C# 角、代码项目、Stack Overflow、Asp.Net 论坛，而不是在这里发表评论。发推文或通过电子邮件将您的问题链接发送给我，如果可以的话，我一定会尽力提供帮助。

相关文章