ブートストラップツールチップの動的配置

Question

属性セレクタを使用してブートストラップのツールチップを使用しています。すなわち任意の要素はtitle属性がツールチップとしてレンダリングする必要がありました。

$('[title]').tooltip({placement: 'bottom', trigger: 'hover'}); 

しかし、いくつかの理由のために、私は配置を変更したいいくつかの要素のために。もともと、私は要素のためにdata-placement属性を使用しませんでしたが、私はそのツールチップがデフォルト以外の配置を持つようにするために、私はdata-placement属性を指定して、上記のコードを次のように変更しました：

$('[title]').tooltip({placement: (typeof $(this).attr('data-placement') === 'undefined')? 'bottom' : $(this).attr('data-placement'), trigger: 'hover'}); 

このコードでは、data-placement属性のない要素の配置をbottomに設定し、その属性を持つ要素の値と同じに設定する必要があります。

しかし、コードが期待どおりに動作しません、それは配置を設定=すべての要素のための下でも、例えば、それらはdata-placement='right

Answer 1

は、2つの引数を受け取り - 最初のものは、ツールヒントの引数であり、第二は、元の要素です。
あなたが探しているデータを取得するには、この要素を使用することができます。

$('[title]').tooltip({ 
 
    placement: function(t_el, el) { 
 
    return (typeof $(el).data('placement') === 'undefined') ? 'bottom' : $(el).data('placement'); 
 
    }, trigger: 'hover' 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div style="margin: 35px 55px;"> 
 

 
    <button type="button" class="btn btn-default" data-placement="left" title="Tooltip on left">Tooltip on left</button> 
 

 
    <button type="button" class="btn btn-default" data-placement="top" title="Tooltip on top">Tooltip on top</button> 
 

 
    <button type="button" class="btn btn-default" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> 
 

 
    <button type="button" class="btn btn-default" data-placement="right" title="Tooltip on right">Tooltip on right</button> 
 
</div>

Answer 2

私は$(this)がツールチップを参照していないためであると信じているが、あなたの親セレクタではなく、おそらくdocumentです。

この試し：placementのコールバック関数

$('[title]').each(function() { 
    $(this).tooltip({ 
     placement: (typeof $(this).attr('data-placement') === 'undefined') ? 'bottom' : $(this).attr('data-placement'), 
     trigger: 'hover' 
    }); 
});