0

このjqueryライブラリを自分のWebページに使用したいと思います。記事ページのすべてのコードをコピーしてから、次のように.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

デモでは、このスタイルをヘッドタグ内に追加します。

<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

JavaScriptを入力すると、表示されalert("HI");ますか？

また、<!doctype html>一番上にある必要があります。

CSSの場合、これを頭に入れてください。<link rel="stylesheet" type="text/css" href="mystyle.css" />

于 2012-06-24T09:38:20.993 に答える