jQueryUI tooltip 自定义提示内容

最新推荐文章于 2023-06-10 08:49:17 发布

zhang-hui

最新推荐文章于 2023-06-10 08:49:17 发布

阅读量5.7k

点赞数

分类专栏： HTML设计文章标签： html jQueryUI tooltip

本文链接：https://blog.csdn.net/zhang_hui_cs/article/details/51695138

版权

HTML设计专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI 工具提示框（Tooltip） - 默认功能</title>
    <link rel="stylesheet" href="http//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    <script>
        $(document).ready(function () {
            $(function () {
                $(document).tooltip({
                    content: function () {
                        // 根据 $(this) 决定提示的内容
                        if ($(this).is("input")) {
                            // 提示纯HTML，可以自定义样式、内容等等
                            return "<div style='background-color: coral; width:100px; height: 100px'><h1>Hint Hint Hint</h1></div>"
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>

<p><label for="age">您的年龄：</label>
    <!--要为需要提示的元素添加title属性!-->
    <input id="age" title="年龄仅用于统计。">
</p>
</body>
</html>