Tooltip Positioning

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Tooltip Positioning

Δημοσίευση από apsuh0s » 23 Μαρ 2013 21:14

Καλησπέρα,

θέλω τα φώτα σας όσον αφορά ένα θεματάκι που προέκυψε με τη συμπεριφορά ενός tooltip.

Έχω ένα container και μέσα σε αυτό μία unordered list:

Κώδικας: Επιλογή όλων

<div class="container">
	<ul>
    	<li><a href="#" class="btn" title="list item title">list item 1</a></li>
    	<li><a href="#" class="btn" title="list item title">list item 2</a></li>
    	<li><a href="#" class="btn" title="list item title">list item 3</a></li>
    	<li><a href="#" class="btn" title="list item title">list item 4</a></li>
    	<li><a href="#" class="btn" title="list item title">list item 5</a></li>
    </ul>
</div><!-- /container -->
Όταν ο χρήστης κάνει hover σε anchor εμφανίζεται ένα tooltip:

Κώδικας: Επιλογή όλων

$&#40;'.btn'&#41;.tooltip&#40;&#123;
        placement&#58; 'n'
&#125;&#41;;
όπου το 'n' υποδηλώνει το 'north' ώστε το tooltip να εμφανίζεται πάνω από το anchor.

Όταν ο χρήστης κάνει scroll down τη σελίδα και το #container φτάσει στο πάνω μέρος του viewport το #container αλλάζει positioning από relative σε fixed και προστίθεται η class 'fixed' σε αυτό

Κώδικας: Επιλογή όλων

<div class="container fixed">
....
....
</div><!-- /container -->
Το πρόβλημα είναι ότι πλέον το tooltip δεν είναι εμφανές μιας και το #container είναι τέρμα πάνω. Αυτό που θέλω είναι όταν προστίθεται η κλάση 'fixed' να αλλάζει στο script που ανέφερα παραπάνω το placement του tooltip και από 'n' να γίνεται 's'.

Γνωρίζει κάποιος τον τρόπο;;
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Tooltip Positioning

Δημοσίευση από apsuh0s » 23 Μαρ 2013 21:36

Παίδες άκυρο..

Το script είχε feature 'smart placement' το οποίο κάνει ακριβώς αυτό που ζητούσα. Κρατάει το tooltip μέσα στο viewport.

btw για όποιον ενδιαφέρεται το script βρίσκεται εδώ..
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
webdevgr
Δημοσιεύσεις: 703
Εγγραφή: 11 Δεκ 2010 17:25
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Tooltip Positioning

Δημοσίευση από webdevgr » 24 Μαρ 2013 12:40

Το powertip είναι από τα πιο ελαφριά και εύχρηστα script (το χρησιμοποιώ σχεδόν σε όλα μου τα sites) αν θέλεις πιο σύνθετα πράγματα δοκίμασε το qtip2

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Tooltip Positioning

Δημοσίευση από alou » 26 Μαρ 2013 13:19

apsuh0s έγραψε:Καλησπέρα,

Κώδικας: Επιλογή όλων

$&#40;'.btn'&#41;.tooltip&#40;&#123;
        placement&#58; 'n'
&#125;&#41;;
Πάντως. άν υποθέσουμε ότι δεν υπήρχε smart placement θα μπορούσες να χρησιμοποιησεις την offset:

Κώδικας: Επιλογή όλων

var offset = $&#40;'.btn'&#41;.offset&#40;&#41;;
var topoff = offset.top;
if &#40;topoff > 100&#41; &#123; $&#40;'.btn'&#41;.tooltip&#40;&#123; placement&#58; 'n' &#125;&#41;; &#125;
else &#123; $&#40;'.btn'&#41;.tooltip&#40;&#123;  placement&#58; 's' &#125;&#41;; &#125;
ας πούμε - ή να βάλεις σε μια μεταβλητή και το .btn height και να τα συγκρίνεις. Και φαντάζομαι το smart positioning κάτι τέτοιο κάνει.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης