Umiestenie div dynamicky vytvoriť tooltip - javascript, jquery, jquery-ui

Chcem ukázať div(ako tooltip s nejakým prispôsobeným obsahom, ako je obrázok a text), keď je na prepojení jeden odkaz. Rovnako ako na Facebooku, keď umiestnite kurzor myši na meno niekoho, získate jeho krátke profilové údaje.

Chcem použiť jeden div(s aktualizovaným obsahom) pre všetky odkazy na stránke. Aby som to mohol implementovať, musím vedieť, ako umiestniť môj div vedľa odkazu dynamicky pomocou JavaScriptu.

Hľadáme podporu všetkých hlavných prehľadávačov

odpovede:

prečo nielen použiť title atribút? Viem, že v značke nemôžete mať značku title atribút, ale môžete použiť skvelé doplnky typu jquery ako Tip Tip alebo popisok získať veľmi pekné popisy nástrojov.

Inak tieto knižnice urobia všetko za vás, môžete iba hacknúť zdroj a nahradiť atribút title svojím div. Tj. zálohujte ho tak, aby atribút title obsahoval id alebo class z div prvok, ktorý obsahuje vaše údaje, a stačí zobraziť div v rámci popisku div.

toto Coda popup bubliny Zdá sa, že plugin tiež používa div a prevádza ho na vyskakovacie okno, takže to môže pomôcť, aj keď sa zdá, že je to z roku 2008. Neviem, či je udržiavané alebo aktualizované.

V opačnom prípade je jediná možnosť, ktorú máte onMouseOver pre každý z prvkov získajte pozíciu myši a absolútnu pozíciu vášho divu do polohy myši. To by bola najjednoduchšia implementácia.

Niečo ako toto?:

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