Ich habe ein paar verschiedene Tooltip-Plugins im Laufe der Jahre verwendet, aber ich denke, es wird Zeit, meine eigenen zu schreiben. Einfach, ich bin nicht auf der Suche nach einem Plugin, das alle Optionen hat, wie ich weiß, wie ich will, dass jeder Tooltip, der auftaucht, um aussehen und sich verhalten. Die meisten Plugins haben eine Reihe von Animationen und Positionen zur Verfügung, und ich denke, das ist zu viel für die leichtgewichtige ich will, mit Ihrer Hilfe natürlich zu schaffen :)
Grundsätzlich mit dem Titel-Attribut der Hover, möchte ich eine QuickInfo direkt über und zentriert, um das Element schwebte erscheinen.
Ich weiß, wie man das Div, das angezeigt wird, auffüllt, aber was ich versuche, herauszufinden, ist, wie man diesem Div sagt, sich direkt über dem Element zu positionieren.
Im Idealfall ist dies mit minimalem Code möglich. Meine Logik sieht ungefähr so aus (Pseudo-Code):
<html>
<head>
<style type="text/css">
#myToolTip { display: none; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.hoverAble').hover(function(){
var tip = $(this).attr('title');
$('#myToolTip').html(tip).fadeIn();
}, function() {
$('#myToolTip').fadeOut();
}
});
</script>
</head>
<body>
<div id="myToolTip"></div>
<div class="hoverAble" title="I am good at code"></div>
</body>
</html>Natürlich ist der obige Code nur gehen, um die QuickInfo zu füllen und nicht relativ zu dem schwebenden Element positioniert werden. Das ist, wo mein Verständnis fällt kurz. Können Sie helfen?
Bearbeiten: Nur zur Klarstellung, ich bin nicht wollen, dass der Tooltip mit der Maus zu bewegen.
