Question

我想在工具提示中显示JSON响应（来自ajax调用）。我想将工具提示相对于其触发元素（一个锚点）放置在其左下方。我将在同一页面上有许多触发元素。我想过用这样的东西：

$.ajax({
    // Do stuff
    success: function(response) {
        $(this).after("<div class='tooltip'>" + response.message + "</div>");
    }
});

此代码无法解决我的问题。它将工具提示插入目标元素的容器中。我需要工具提示浮动并独立于目标元素，有点像在帖子上投票时显示的工具提示StackOverFlow。

如何在jQuery中执行此操作？

Answer 1

您可以使用jquery ui position()将工具提示与相对于特定元素的响应放在一起。

Answer 2

要使您的工具提示独立于其他元素，它应该是<body>的直接子并具有高z-index CSS属性。

如果您尝试将工具提示放在任何其他位置的DOM中，它可能会干扰页面布局。

然后根据触发元素的坐标使用absolute定位。

.tooltip {
    z-index: 10000;
    position: absolute;
}

var offset = $(trigger).offset();
offset.top += $(trigger).height();
$(tooltip).offset(offset);

如何在jQuery中相对于其触发器元素定位工具提示？

2 个答案: