Πρωτότυπα tooltips

[Anastasis 48]

 

Για την παρακάτω επιλογή θα χρειαστούμε το ακόλουθο αρχείο javascript tooltip.js και να προσθέσουμε στο css αρχείο μας τον παρακάτω κώδικα:

κώδικας:

div#qTip { padding: 3px; height:15px; border: 1px solid #666; display: none; background:#F5F7FE; color:#666666; font: bold 10px Verdana, Arial, Helvetica, sans-serif; position: absolute; }

Padding: απόσταση κειμένου από τις άκρες του tooltip
Height: ύψος του tooltip
Border: Περίγραμμα του tooltip 1px μονοκόμματη γραμμή χρώματος #666
Display:none δεν θα εμφανίζεται κατά την φόρτωση της σελίδας
background: χρώμα του tooltip
color: χρώμα γραμμάτων μέσα στο tooltip
font: επιλογές για την γραμματοσειρά
position:absolute τοποθέτηση του tooltip απόλυτη αναλόγως το που βρίσκεται το ποντίκι.
Στο head της ιστοσελίδας θα πρέπει να προσθέσουμε τον παρακάτω κώδικα

κώδικας:

<script language="JavaScript" src="tooltip.js" type="text/JavaScript"></script>

Το tooltip ισχύει όπου υπάρχει link μέσα στην σελίδα σε κείμενο ή σε ολόκληρο το div.
Live demo