0

jquery ツールチップスター プラグイン ( https://iamceege.github.io/tooltipster/ ) を使用していますが、配置に問題があります。画像を地図上に配置し、絶対に配置します。ツールチップを下部に表示したいのですが、うまくいきません。画像の上部に表示され続け、ツールチップの上部が画面外になります (こちらを参照- ツリーにカーソルを合わせるとツールチップが表示されます)。 .

これは私のコードです:誰かが私が間違っていることを教えてくれますか? または、ツールチップが下部に表示されないのはなぜですか?

    <script>
        $(document).ready(function() {

            $('#tt1').tooltipster({
                minWidth: 400,
                maxWidth: 400,
                content: $('<span><p><strong>Duffel-West</strong><br>&nbsp;<br><img src="006.jpg"><br>&nbsp;<br>Kwb herorienteren in Duffel. Hoe kunnen we via het transitieverhaal nieuwe leden vinden? Op de infoavond rond de stroomafschakelingsprocedure zijn er mensen gevonden om een repair cafe te organiseren. Dit repair cafe was een succes met meer dan 100 bezoekers. Het is nu de bedoeling om dit twee maal per jaar te organiseren. Alsook dit te combineren met andere transitieactiviteiten.  <br>&nbsp;<br><strong>Status</strong><br>Kwb Duffel-West  slaagt in zijn herorienteringsproces. </span>'),
                position: 'bottom'
            });
        });
    </script>
</head>

<body>
    <img src="i1.png" width="30" height="41" id="tt1" style="position: relative; left:250px; top: 270px; cursor:crosshair" class="tooltip 1" title="Duffel West">
</body>
4

1 に答える 1

0

あなたの要素の位置が原因​​で生成されます。上部よりもスペースが少ないため、ツールチップは下部に収まりません。このフィドルで動作しているのを見ることができます：

http://jsfiddle.net/dj2tvjjs/

上の画像では、下の位置でツールチップを表示する必要がありますが、下の画像では、初期化する同じコードでツールチップの上の位置を表示する必要があります

$('#tt1, #tt2').tooltipster({
    position: 'bottom'
});
于 2015-08-10T10:06:25.920 に答える