webentwicklung-frage-antwort-db.com.de

Wie erstelle ich Popup-Boxen neben den Links, wenn ich mit der Maus darüber fahre?

Folgendes möchte ich implementieren:

Ich habe zwei Hyperlinks, die auf der Webseite angezeigt werden:

<a href="http://foo.com"> foo </a>

<a href="http://bar.com"> bar </a>

und ich habe auch zwei beschreibungen zu den links als divs:

<div id="foo">foo means foo</div>

<div id="bar">bar means bar</div>

Wenn ich nun mit der Maus über den Link von foo fahre, sollte die entsprechende Beschreibung div erscheinen und sie sollte direkt neben der Stelle erscheinen, an der sich mein Cursor befindet.

Wenn ich mit der Maus über "foo" fahre, sollte ein Popup-Feld mit "foo means foo" direkt neben dem Mauszeiger angezeigt werden. Gleiches gilt für "bar".

Bitte zeigen Sie eine schnelle und einfache Möglichkeit, dies zu implementieren, mit Javascript/jquery, CSS, oder einer Kombination davon.

P.S. Ich entschuldige mich dafür, dass ich es nicht klar erklärt habe. Ich möchte tatsächlich weitere Links oder Bilder in das Beschreibungsfeld einfügen, anstatt reinen Text, sodass ein normaler Tooltip möglicherweise nicht ausreicht.

Vielen Dank.

8
eastboundr

Hier ist die einfachste Lösung.

HTML:

<a href="http://foo.com" data-tooltip="#foo">foo</a>
<a href="http://bar.com" data-tooltip="#bar">bar</a>

<div id="foo">foo means foo</div>
<div id="bar">bar means bar</div>

CSS:

div {
    position: absolute;
    display: none;
    ...
}​

JavaScript:

$("a").hover(function(e) {
    $($(this).data("tooltip")).css({
        left: e.pageX + 1,
        top: e.pageY + 1
    }).stop().show(100);
}, function() {
    $($(this).data("tooltip")).hide();
});

DEMO: http://jsfiddle.net/8UkHn/

13
VisioN

Haben Sie in diesem Fall überlegt, ein "title" -Attribut zu verwenden?

<a href="http://foo.com" title="foo means foo"> foo </a>

Prüfen Sie, ob dies Ihren Anforderungen entspricht.

Wenn Sie mit der Maus über den Link "foo" fahren, wird neben dem Mauszeiger ein kleines Kästchen mit "foo means foo" angezeigt.

5
Kshitij

Verwenden Sie etwas wie funkytooltips .

Es gibt jedoch noch viele andere; Das Suchen nach Dingen wie "JQuery Link Popup" usw. taucht häufiger auf.

0
Dave Newton