【JQuery UI】工具提示插件——tooltip

来源：互联网发布：xp画图软件编辑：程序博客网时间：2024/05/18 02:59

工具提示插件可以定制元素的提示外观，提示内容支持变量、Ajax远程获取，还可以自定义提示内容显示的位置，它的调用格式如下：

$(selector).tooltip({options});

其中selector为需要显示提示信息的元素，可选项参数options为tooltip()方法的配置对象，在该对象中，可以设置提示信息的弹出、隐藏时的效果和所在位置。

例子：将文本输入框元素绑定提示插件，当鼠标在文本输入框中移动时，在指定的位置并以动画的效果显示对应的title属性值内容。

    <body>        <div id="divtest">            <div class="title">                工具提示插件</div>            <div class="content">                <div>                    <label for="name">                        姓名</label>                    <input id="name" name="name" title="我是土豪，欢迎与我做朋友" />                </div>            </div>        </div>                <script type="text/javascript">            $(function () {                $("#name").tooltip({                    show: {                        effect: "slideDown",                        delay: 1000                    },                    hide: {                        effect: "explode",                        delay: 1000                    },                    position: {                        my: "left top",//提示框(我的左上)                        at: "left bottom"//当前框(在你的右下)                    }                });            });        </script>    </body>

0 0