Question

我想在我的网页上使用this 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样式，我该怎么办？

Answer 1

工作演示 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 in demo

.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;
}

工作形象

enter image description here

Answer 2

对于演示，请在 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]-->

Answer 3

如果您将alert("HI");放入javascript中，是否会显示？

此外，<!doctype html>应位于顶部。

对于CSS，请将其放在头部：<link rel="stylesheet" type="text/css" href="mystyle.css" />

我不能将我的jquery代码作为工具运行

3 个答案: