Поставяне ди динамично за създаване на подсказка - javascript, jquery, jquery-ui

Искам да покажа div(като tooltip с някакво персонализирано съдържание като изображение и текст), когато има връзка върху връзката. Както във Facebook, когато задържите курсора на мишката върху името на някого, получавате техните кратки данни за профила.

Искам да използвам един div(с актуализирано съдържание) за всички връзки на страницата. За да изпълня това, трябва да знам как да позиционирам моя div до връзката динамично чрез JavaScript.

Търсите да поддържате всички основни браузъри

Отговори:

защо не просто да използвате title атрибут? Знам, че не можеш да имаш маркировка в title атрибут, но можете да използвате страхотни jquery плъгини като Съвет Съвет или Подсказка за да получите много красиви подсказки.

В противен случай тези библиотеки правят всичко за вас, можете просто да хакнете източника и да замените атрибута на заглавието с вашия div. Т.е. върнете го, така че атрибутът на заглавието съдържа id или class от div елемент, който съдържа вашите данни и просто показва div в подсказка div.

Това Coda Popup Bubbles Изглежда, че плъгинът използва div и го превръща в изскачащ прозорец, така че може да помогне, макар да изглежда, че е от 2008 г. Не знам дали се поддържа или актуализира.

В противен случай единствената опция, която имате е onMouseOver за всеки от елементите, получете позицията на мишката и абсолютната позиция на вашия div до позицията на мишката. Това би било най-простото изпълнение.

Нещо като това?:

(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);