jQuery：无法让工具提示插件工作

发布于 2024-09-01 08:04:12 字数 1994 浏览 10 评论 0原文

我正在尝试使用此工具提示插件： http://bassistance.de/jquery -plugins/jquery-plugin-tooltip/。我似乎无法让它发挥作用。

<head>
    <script type="text/javascript" src="/static/JQuery.js"></script>
    <script type="text/javascript" src="/static/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript" src="/static/jquery.json-2.2.min.js"></script>
    <script type="text/javascript" src="/static/jquery.form.js"></script>
    <script type="text/javascript" src="/static/js-lib/jquery.bgiframe.js"></script>
    <script type="text/javascript" src="/static/js-lib/jquery.delegate.js"></script>
    <script type="text/javascript" src="/static/js-lib/jquery.dimensions.js"></script>
    <script type="text/javascript" src="/static/jquery.tooltip.js"></script>
    <script type="text/javascript" src="/static/sprintf.js"></script>
    <script type="text/javascript" src="/static/clientside.js"></script>
</head>

我在一个简单的例子中尝试一下：

clientside.js：

$(document).ready(function () {

    $("#set1 *").tooltip();
});

目标 html：

   <div id="set1">
                <p id="welcome">Welcome. What is your email?</p>
                <form id="form-username-form" action="api/user_of_email" method="get">
                    <p>
                    <label for="form-username">Email:</label>
                    <input type="text" name="email" id="form-username" />
                    <input type="submit" value="Submit" id="form-submit" />
                    </p>
                </form>
                <p id="msg-user-accepted"></p>
            </div>

不幸的是，什么也没有发生。我做错了什么？

原文

I'm trying to use this tooltip plugin: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/. I can't seem to get it to work.

<head>
    <script type="text/javascript" src="/static/JQuery.js"></script>
    <script type="text/javascript" src="/static/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript" src="/static/jquery.json-2.2.min.js"></script>
    <script type="text/javascript" src="/static/jquery.form.js"></script>
    <script type="text/javascript" src="/static/js-lib/jquery.bgiframe.js"></script>
    <script type="text/javascript" src="/static/js-lib/jquery.delegate.js"></script>
    <script type="text/javascript" src="/static/js-lib/jquery.dimensions.js"></script>
    <script type="text/javascript" src="/static/jquery.tooltip.js"></script>
    <script type="text/javascript" src="/static/sprintf.js"></script>
    <script type="text/javascript" src="/static/clientside.js"></script>
</head>

I try it out in a simple example:

clientside.js:

$(document).ready(function () {

    $("#set1 *").tooltip();
});

The target html:

   <div id="set1">
                <p id="welcome">Welcome. What is your email?</p>
                <form id="form-username-form" action="api/user_of_email" method="get">
                    <p>
                    <label for="form-username">Email:</label>
                    <input type="text" name="email" id="form-username" />
                    <input type="submit" value="Submit" id="form-submit" />
                    </p>
                </form>
                <p id="msg-user-accepted"></p>
            </div>

Unfortunately, nothing happens. What am I doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

演多会厌 2024-09-08 08:04:12

您的元素上需要一个 title 属性来获取工具提示，如下所示：

<input type="text" name="email" id="form-username" title="My Tooltip" />

您可以看到此处演示

另外，请确保包含CSS 文件，或者使用您自己的 CSS 来设置工具提示的样式，工具提示插件包含的默认样式表是：

#tooltip {
    position: absolute;
    z-index: 3000;
    border: 1px solid #111;
    background-color: #eee;
    padding: 5px;
    opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }

You need a title attribute on your elements to get the tooltip, like this:

<input type="text" name="email" id="form-username" title="My Tooltip" />

You can see a demo here

Also make sure you're including the CSS file, or have CSS of your own to style the tooltip, the default stylesheet the tooltip plugin includes is:

#tooltip {
    position: absolute;
    z-index: 3000;
    border: 1px solid #111;
    background-color: #eee;
    padding: 5px;
    opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }

回复收藏 0 原文

~没有更多了~