0

我用 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()会将工具提示定位在相对区域周围，但它仍然很远 =/

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

4

2 回答 2

2

有很多与工具提示相关的插件。比如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;持有人，所以它不需要任何额外的空间和工具提示将绝对持有人

检查小提琴 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'
   });
});
于 2013-10-09T18:32:53.153 回答
1

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

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

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

$(".tooltip").css({
    left: CS_x_pos - width, 
    top: CS_y_pos - height 
});
于 2013-10-09T18:25:04.520 回答