Jump to content
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Sign in to follow this  
Anastasis

Πρωτότυπα tooltips

Recommended Posts

 

Για την παρακάτω επιλογή θα χρειαστούμε το ακόλουθο αρχείο 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

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×