使用.css（）定位工具提示

Question

我用CSS创建了一个工具提示，我想将箭头放在每个按钮的图标上方。我尝试使用jQuery Mobile，但它对我没有用，所以现在我最简单的方法就是手动定位工具提示：（

另外，我想知道如果我在具有不同分辨率的移动应用上使用此页面或者缩小页面大小，手动定位工具提示是否会改变？

我尝试使用.offset()来获取每个按钮ID的相对区域的工具提示类。

var CS_x_pos = $("#CS").offset();
var CS_y_pos = $("#CS").offset();

var GH_x_pos = $("#GH").offset();
var GH_y_pos = $("#GH").offset();

//CS
$(".tooltip").css({
    left: CS_x_pos, 
    top: CS_y_pos 
});


//GH
$(".tooltip").css({
    left: GH_x_pos, 
    top: GH_y_pos 
});

当我尝试：

var CS_x_pos = $("#CS").offset().left;
var CS_y_pos = $("#CS").offset().top;

我明白了：

我不确定为什么工具提示最终会在底部

这是我的jsfiddle：

http://jsfiddle.net/liondancer/rKPfe/

我认为.offset()会将工具提示放在相对区域周围，但它仍然相当远= /

有人可以帮助我或指导我手动定位这些工具提示吗？非常感谢！

Answer 1

有很多与工具提示相关的插件。比如tipsy或jQuery ui以及更多你可以通过谷歌搜索找到的。

如果您希望它完全使用css，最好的方法是包装工具提示和触发元素。喜欢

<div class="holder"> 
<div class = "tooltip">
        <div class = "tooltip_body"> GH is OFF
            <div class = "tooltip_arrow"></div>
        </div>
 </div>
 <a class="holder" data-role="button" data-icon="plus"> GH</a>
 </div>

你可以提供相对于你的触发元素的工具提示的CSS。 比如bottom: 60px; right:0;

注意：在持有人身上提供display:inline-block和position:relative;，这样就不需要任何额外的空间，工具提示绝对是持有者

检查fiddle http://jsfiddle.net/rKPfe/3/

<强>更新

如果你不确定你可以用jQuery做底部位置;

$('.tooltip').each(function(){
   var elm=$(this),
       holder=elm.closest('.holder');
   elm.css('bottom',holder.outerHeight()+'px');
});

左右可以将相对（如左：0或右：0）赋予持有者位置（不受更改窗口大小的影响）。只有在你希望工具提示居中的情况下，才能写入。

$('.tooltip').each(function(){
   var elm=$(this),
       holder=elm.closest('.holder');
   elm.css({
    'bottom':holder.height()+'px',
    'left':-(elm.outerWidth()-holder.outerWidth())/2+'px'
   });
});

Answer 2

因为您没有考虑工具提示本身的高度和宽度。

计算其高度和宽度，并减去顶部和左侧的值。

var width = parseFloat($(".tooltip").css('width'));
var height = parseFloat($(".tooltip").css('height'));

$(".tooltip").css({
    left: CS_x_pos - width, 
    top: CS_y_pos - height 
});