0

我想为我的网页使用这个jquery 库。我正在复制文章页面中的所有代码，然后粘贴到我的 .html 文件中，如下所示：

<html>
    <head>
        <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
        <script type="text/javascript">
            $("document").ready(function(){
                $("#demo img[title]").tooltip();
            });
        </script>
    </head>
    <body>
    <br />
    <br />
        <div id="demo">
          <img src="image1.jpg" title="The tooltip text #1"/>
          <img src="image2.jpg" title="The tooltip text #2"/>
          <img src="image3.jpg" title="The tooltip text #3"/>
          <img src="image4.jpg" title="The tooltip text #4"/>
        </div>
    </body>
</html>

但是 .tooltip 类样式没有运行。我看不到背景图像和其他图像。我需要如何编辑我的 .html 文件？

另外，如果我想更改此库的 css 样式，我该怎么办？

4

3 回答 3

2

工作演示 http://jsfiddle.net/QWeKw/2/ 或 http://jsfiddle.net/XUhxQ/

您可以制作自己的样式。

很好的链接：http: //jquery.bassistance.de/tooltip/demo/ 或 http://docs.jquery.com/Plugins/Tooltip

这应该有帮助，

代码

$("img[title]").tooltip({
    events: {
        def:     "mouseenter,mouseleave",    // default show/hide events for an element
        input:   "focus,blur",               // for all input elements
        widget:  "focus click,blur",  // select, checkbox, radio, button
        tooltip: "mouseenter,mouseleave"     // the tooltip element
    }
});

css里面的演示

.tooltip {
    font-family:tahoma;
    background-color: #000000;
    border: 1px solid #FFFFFF;
    box-shadow: 0 0 10px #000000;
    color: #FFFFFF;
    display: none;
    font-size: 12px;
    padding: 10px 15px;
    text-align: left;
    width: 200px;
}​

工作图像

在此处输入图像描述 ​</p>

于 2012-06-24T09:40:51.057 回答
1

对于演示，在你的 head标签中添加这个样式：

<style>

      .tooltip {
        display:none;
        background:transparent url(http://jquerytools.org/media/img/tooltip/black_arrow.png);
        font-size:12px;
        height:70px;
        width:160px;
        padding:25px;
        color:#eee;
      }
        /* style the trigger elements */
      #demo img {
        border:0;
        cursor:pointer;
        margin:0 1px;
      }
</style>
<!--[if lt IE 7]>
<style>
  .tooltip {
    background-image:url(http://jquerytools.org/media/img/tooltip/black_arrow.gif);
  }
</style>
<![endif]-->
于 2012-06-24T09:42:34.720 回答
-1

如果你alert("HI");输入你的javascript，它会出现吗？

此外，<!doctype html>应该在顶部。

对于 CSS，把它放在头上：<link rel="stylesheet" type="text/css" href="mystyle.css" />

于 2012-06-24T09:38:20.993 回答