18

私はこの正確な質問が取り上げられているのを見たことがありません...もしそうなら、私にそれを指摘してください。

jqueryのUIツールチップを使用しています。マウスオーバーすると画像を表示したいというリンクが1つあります。これまでのところ、何もうまくいきませんでした。

ヘッダーのUIコード：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

HTML：

(see <a id='riverroad' href='#' title='' >image of 1 Maple St.</a>)

コード：

$( "#riverroad" ).tooltip({ content: "<img src='./images/myimage.jpg/>" });

私が間違っていることを教えてください。

4

3 に答える 3

19

これを試してください：

HTML

<a id="riverroad" href="#" title="" >image of 1 Maple St.</a>

JQuery

$( "#riverroad" ).tooltip({ content: '<img src="yourImagePath" />' });

作業フィドルを参照してください。

Jquery 1.9.1 と JqueryUI 1.9.2 はもちろん含まれています。ちなみに、画像のパスが正しいかどうかを確認してください。

編集：あなたはjQueryでリンクを設定していると私に言いました。この2番目の実例を見て​​ください：

HTML

<div id="content">    
</div>

JQuery

$(document).ready(function() {
   $("#content").html('<a id="riverroad" href="#" title="" >image of 1 Maple St.</a>');
   $("#content #riverroad").tooltip({ content: '<img src="http://icdn.pro/images/fr/a/v/avatar-barbe-brun-homme-utilisateur-icone-9665-128.png" />' }); 

});

これが新しいフィドルです！

于 2013-03-07T15:10:33.493 に答える
7

まず、srcタグの終了引用符がありません。コードは次のようになります。

$( "#riverroad" ).tooltip({ content: "<img src='./images/myimage.jpg' />" });

さらに、これは、 jQueryUI の Web サイトに示されているように、次のコードで機能するはずです。

HTML :

<a id='riverroad' href='#' title='' >image of 1 Maple St.</a>

JS:

<script>
  $(function() {
    $( document ).tooltip({
      items: "a",
      content: function() {
        var element = $( this );
        if (element.attr('id') === 'riverroad') {
          return "<img class='map' src='./images/myimage.jpg' />";
        }
      }
    });
  });
</script>

ここに jsFiddle のデモがあります: http://jsfiddle.net/QgPEw/1/

于 2013-03-07T15:01:10.110 に答える
4

HTML コンテンツを直接タイトルに渡すだけで問題ありません。

<a id="riverroad" href="#" title="<img src='http://icdn.pro/images/fr/a/v/avatar-barbe-brun-homme-utilisateur-icone-9665-128.png'" >image of 1 Maple St.</a>

title内で一重引用符を使用することを忘れないでください。

于 2016-10-10T06:11:35.147 に答える