Question

我希望在链接上有转播时显示div（如tooltip，其中包含一些自定义内容，如图片和文字）。就像在Facebook上一样，当你将鼠标悬停在某个人的名字上时，你会得到他们的简短个人资料。

我想为页面上的所有链接使用单个div（包含更新的内容）。为了实现这一点，我需要知道如何通过JavaScript动态地将div放置在链接旁边。

希望支持所有主流浏览器

Answer 1

为什么不使用title属性？我知道你不能在title属性中添加标记，但是你可以使用像Tip Tip或Tooltip这样的优秀jquery插件来获得非常漂亮的工具提示。

否则这些库会为您完成所有操作，您只需破解源代码并用div替换title属性即可。即支持它，以便title属性包含包含您的数据的id元素的class或div，并在工具提示div中显示div。

此Coda Popup Bubbles插件似乎也使用div并将其转换为弹出窗口，因此它可能有所帮助，虽然它似乎是从2008年开始。我不知道它是否正在维护或更新。

否则，对于每个元素，唯一的选项是onMouseOver，获取鼠标位置和div对鼠标位置的绝对位置。这将是最简单的实施。

Answer 2

像this？：

(function ($) {
    $(document).ready(function () {
        $('a').hover(
            function () {
                var $this = $(this),
                    p = $this.position(),
                    w = $this.width(),
                    h = $this.height();

                var $tooltip = $('<div id="tooltip">').css({
                    display: 'inline-box',
                    position: 'absolute',
                    left: p.left,
                    top: p.top - h - 5,
                    background: 'yellow',
                    border: 'solid 1px black' 
                });

                $tooltip.text('Hello World!');

                $tooltip.appendTo('body');
            },
            function () {
                  $('#tooltip').remove();
            }
        );
    });
})(jQuery);

动态定位div以创建工具提示

2 个答案: