0

このコードはすでに機能しています：

<div class="tippytrip">Here's a link!</div>
<div class="tippytrip">Here's a link!</div>
<div class="tippytrip">Here's a link!</div>
<div id="tooltip-container">The tooltip!</div>

$('.tippytrip').hover(function(){
    var offset = $(this).offset();
    console.log(offset)
    var width = $(this).outerWidth();
    $('#tooltip-container').css({top:offset.top, left:offset.left + width + 10}).show();
}, function(){
    $('#tooltip-container').hide();
});

.tippytrip {cursor:pointer; margin-bottom:40px; width:80px; border:2px solid #ccc; padding:5px}
#tooltip-container {position:absolute; padding:30px; background:black; color:white; display:none}

http://jsfiddle.net/5LSxG/

しかし、それはそのIDを持つ1つのツールチップコンテナに対してのみ機能します。呼び出し元または呼び出されたdivのいずれかで動的にしたいです。

4

1 に答える 1

0

データ属性を使用して動的にすることができます。

<div class="tippytrip" data-tip="Tip 1">Here's a link!</div>
<div class="tippytrip" data-tip="Tip 2">Here's a link!</div>
<div class="tippytrip" data-tip="Tip 3">Here's a link!</div>
<div id="tooltip-container">The tooltip!</div>

$('.tippytrip').hover(function(){
    var offset = $(this).offset();
    console.log(offset)
    var width = $(this).outerWidth();
    $('#tooltip-container').html($(this).data('tip')).css({top:offset.top, left:offset.left + width + 10}).show();
}, function(){
    $('#tooltip-container').hide();
});

.tippytrip {cursor:pointer; margin-bottom:40px; width:80px; border:2px solid #ccc; padding:5px}
#tooltip-container {position:absolute; padding:30px; background:black; color:white; display:none}

JSFiddle

リンクごとに複数のヒント コンテナーが必要な場合は、次のようにすることができます。

<div class="tippytrip" data-tip="1">Here's a link!</div>
<div class="tippytrip" data-tip="2">Here's a link!</div>
<div class="tippytrip" data-tip="3">Here's a link!</div>
<div class="tooltip-container" id="tooltip-container1">First Tip</div>
<div class="tooltip-container" id="tooltip-container2">Second Tip</div>
<div class="tooltip-container" id="tooltip-container3">Third Tip</div>

$('.tippytrip').hover(function(){
    var offset = $(this).offset();
    console.log(offset)
    var width = $(this).outerWidth();
    $('#tooltip-container' + $(this).data('tip')).css({top:offset.top, left:offset.left + width + 10}).show();
}, function(){
    $('#tooltip-container' + $(this).data('tip')).hide();
});

.tippytrip {cursor:pointer; margin-bottom:40px; width:80px; border:2px solid #ccc; padding:5px}
.tooltip-container {position:absolute; padding:30px; background:black; color:white; display:none}

JSFiddle

于 2013-06-13T19:06:32.330 に答える