jQuery UIのツールチップの位置を動的に設定する

Question

次のコードがあります。私は彼らが属している要素から矢印でツールチップを取得しようとしています。コード内で私が要素上で、ツールチップのための十分な余地がイマイチならば、私はそれを下に表示するチェックしそう

.ui-tooltip-content { 
    position: relative; 
    padding: 1em; 
} 
.ui-tooltip-content::after { 
    content: ''; 
    position: absolute; 
    border-style: solid; 
    display: block; 
    width: 0; 
} 

.top .ui-tooltip-content::after { 
    bottom: -10px; 
    border-color: #666 transparent; 
    border-width: 10px 10px 0;  
} 

.bottom .ui-tooltip-content::after { 
    top: -10px; 
    border-color: #666 transparent; 
    border-width: 0 10px 10px; 
} 

：

var topPosition = { my: 'center bottom', at: 'center top-10' }; 
var bottomPosition = { my: 'center top', at: 'center bottom+10' }; 
$(document).tooltip 
({ 
    tooltipClass: 'top', 
    position: topPosition, 
    open: function(e,ui){ 
     var topOfToolTip = ui.tooltip.offset().top; 
     var elem = $(e.originalEvent.target); 
     if (elem.offset().top < topOfToolTip) { 
      pos = {my: 'center top', at: 'center bottom+10'}; 
      ui.tooltip.position(pos); 
      ui.tooltip.addClass("bottom");    
     }   
    } 
}); 

は、それから私は、次のCSSを持っています。それはうまくいく。しかし、私の問題は、そのとき矢印が間違った方向を指していることです。私が手動で下位の値を使用するクラスと位置を変更する場合は、上記のツールヒントを取得しようとすると、以下のように動作します。

問題は、位置が設定されていないように見えることです。だから誰かが私にこのことを教えてもらえますか？

Answer 1

私がコメントしたように、positionオプションとusing属性を使用すると、CSSを少し変更するだけでこれを処理できます。

実施例：https://jsfiddle.net/vmmsb9vx/1/

HTML

<p><a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p> 
<p>But as it's not a native tooltip, it can be styled. Any themes built with 
    <a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI&apos;s theme builder application">ThemeRoller</a> will also style tooltips accordingly.</p> 
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p> 
<p> 
    <label for="age">Your age:</label> 
    <input id="age" title="We ask for your age only for statistical purposes."> 
</p> 
<p>Hover the field to see the tooltip.</p> 

CSS

.ui-tooltip-content { 
    position: relative; 
    padding: 1em; 
} 

.ui-tooltip-content::after { 
    content: ''; 
    position: absolute; 
    border-style: solid; 
    display: block; 
    width: 0; 
} 

.top .ui-tooltip-content::after { 
    top: -10px; 
    bottom: auto; 
    border-color: #666 transparent; 
    border-width: 0 10px 10px; 
} 

.bottom .ui-tooltip-content::after { 
    bottom: -10px; 
    border-color: #666 transparent; 
    border-width: 10px 10px 0; 
} 

jQueryの

$(document).tooltip({ 
    position: { 
    my: 'center bottom-20', 
    at: 'center top', 
    using: function(position, feedback) { 
     console.log(feedback); 
     $(this).css(position); 
     $(this).addClass(feedback.vertical); 
    } 
    } 
}); 

feedbackに基づいて、ツールチップに正しいクラスtopまたはbottomが追加されています。あなたのCSSを調整して、矢印が各シナリオで正しい方法を指し示すようにしました。