jqueryツールチップの複数のインスタンスが動作しない

Question

ツールチップをプログラムするために必要な合計4つのグラフィカルなボタンがあります。ここで私が仕事を始めたバイオリンがある

などサイズ/色/位置に基づいて

var id = "#tt"; 
var $elem = $(id); 

$elem.on("mouseenter", function(e) { 
    e.stopImmediatePropagation(); 
}); 

$elem.tooltip({ 
    items: id, 
    content: "<div class='tooltip'><span class='title'>EMPEROR'S ELITE WASH - $18</span><br /><br /><em>Includes:</em><br />&bull; Simoniz Hot Wax and Shine</div>" 
}); 

$elem.on("click", function(e) { 

    $elem.tooltip("open"); 
}); 


$elem.on("mouseleave", function(e) { 
    e.stopImmediatePropagation(); 
}); 


$(document).mouseup(function(e) { 
    var container = $(".ui-tooltip"); 
    if (!container.is(e.target) && 
    container.has(e.target).length === 0) { 
    $elem.tooltip("close"); 
    } 
}); 

を彼らは彼らがどのように動作するかをある時点で1を動作する、と私は個別にすべての4のスタイルをできるようにする必要があります：http://jsfiddle.net/c6wa4un8/261/

これは1つのIDとして正常に機能しましたが、今は複数の要素の操作に問題があります。たぶん同じコードをもう一度コピーするより簡単な方法です（上記のコードを参照）。しかし、IDごとに別々のコンテンツを追加するだけでよいのです。

var container = $(".ui-tooltip")の後に.addClass("king");を追加しようとしましたが、個々の部門の運のスタイリングはありませんでした。

ご協力いただきありがとうございます。

Answer 1

私が作業していた4つの要素があったので、これで終わりました。

$('.king').on('click', function() { 
$parent_box = $(this).closest('.box'); 
$parent_box.siblings().find('.bottom-king').hide(); 
$parent_box.find('.bottom-king') .toggle(); 
}); 

と、ポップアップで、私は複雑なコンテンツを与えるボックス

$('.close').on("click", function() { 
$(this).parents('.bottom-king').fadeOut(); 
});