Jak utworzyć podpowiedź z jquery bez wtyczki?
Przez lata używałem kilku różnych wtyczek podpowiedzi, ale myślę, że nadszedł czas, aby napisać własne. Po prostu nie szukam wtyczki, która ma wszystkie opcje, ponieważ wiem, jak chcę, aby każda podpowiedź, która pojawia się, aby wyglądać i zachowywać się. Większość wtyczek ma wiele animacji i dostępnych pozycji, i myślę, że to zbyt wiele dla tej lekkiej, którą chcę stworzyć, oczywiście z twoją pomocą :)
Zasadniczo, używając atrybutu title w dymku, chcę, aby etykieta narzędzia pojawiła się bezpośrednio nad i była wyśrodkowana na zawieszonym elemencie.
Wiem, jak zapełnić div, który zostanie pokazany, ale próbuję rozpracować, jak powiedzieć temu divowi, aby ustawił się bezpośrednio nad elementem.
w idealnej sytuacji odbywa się to przy minimalnym kodzie. Moja logika mówi coś takiego (pseudo kod):
<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>
Oczywiście powyższy kod wypełni podpowiedź i nie zostanie umieszczony względem elementu zawieszonego. To tam, gdzie moje zrozumienie nie wystarcza. Możesz pomóc?
Edytować: Dla jasności nie chcę, aby podpowiedź poruszała się za pomocą myszy.