7

ホバー効果のあるツールチップに画像を挿入する必要があります。

$(".tel_view").tipTip({defaultPosition: "top", delay: 400, fadeIn: 400,keepAlive:true,activation:"click"});

HTML:

<img src="img_ag/lente.png" width="16" height="19" alt="lente"   class="tel_view" title="">

これは、ツールチップに挿入したい画像です。

<img src="img_ag/leg_in.png" id="prova">

ツールチップに画像を挿入することは可能ですか? 使い方？

4

8 に答える 8

2

こんにちは、以下のように、tipTip() でコンテンツを設定できますactivation:"click"。この動作中のjsfiddleをご覧ください

$(".tel_view").tipTip({
    defaultPosition: "top", 
    delay: 400, 
    fadeIn: 400, 
    keepAlive: true, 
    content: '<img src="img_ag/leg_in.png" id="prova">'
});
于 2016-11-10T05:22:11.117 に答える
1

ソリューションを提供すると、ホバー効果のあるツールチップとして表示され、.css および .css ファイルがなくても .js および .css ファイルを使用できます。このコードを実行することはできません。

<script>
$( function() {
$( document ).tooltip();
} );
</script>
于 2016-11-09T04:35:41.200 に答える
1

その単純で面白い作品は、この問題の解決策です。問題は画像の読み込みです

        var ttfixer = "";
        $(".tooltipL").each(function(){    
            ttfixer += $(this).attr("title");
        });
        $("#tooltipimgfixer").html(ttfixer);
        $(".tooltipL").tipTip({ maxWidth: "auto", edgeOffset: 10 });

HTML を追加

<div style="display:none" id="tooltipimgfixer"></div>

現在、画像はページの読み込みで読み込まれています。ツールチップはうまく機能しますが、

于 2014-02-20T16:52:37.110 に答える
0

のような HTML コード

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

のようなJavaスクリプトコード

$(document).ready(function() { 
     $("#content").tooltip({ content: '<img src="http://1.bp.blogspot.com/-GSsrz5Mvj6I/Uac1p3R1kxI/AAAAAAAAA7k/QFNVmDW5k3U/s320/Tooltip.jpg" />' }); });
于 2016-12-05T04:45:40.000 に答える
0

titletitTip を設定すると、要素の属性として画像の HTML コードを設定できます。

コード例:

<span class='tel_view' title='<img src="img_ag/leg_in.png" id="prova">'></span>

要素は、必要に応じて画像にすることができます。

デモ: http://jsfiddle.net/IrvinDominin/97qkE/

于 2013-09-02T11:13:13.970 に答える