jquery.tooltip.js

(function($){
    $.tooltip = function(text, action, element){ // נגדיר את הפלאגין עם 3 משתנים, הראשון מכיל את תוכן הטולטיפ, השני יכיל איזו פעולה יבצע הטולטיפ (פתיחה או סגירה) והשלישי יכיל את האובייקט של האלמנט
        if(!$('#tooltip').length) // נבדוק אם יצרנו כבר את האלמנט של הטולטיפ עצמו
        {
            var tooltip = $('<div></div>', { // נגדיר משתנה שיכיל את האלמנט של הטולטיפ עצמו
                id: 'tooltip' // נגדיר איידי בשביל זיהוי עתידי והחלת סגנון
            }).appendTo('body'); // ונוסיף אותו לבאדי, אחרת הוא סתם נמצא כאן

            var tooltipText = $('<span></span>').appendTo(tooltip); // ניצור את האלמנט שמכיל את הטקסט עצמו בטולטיפ ונכניס אותו לאלמנט הראשי
            var tooltipArrow = $('<i></i>').appendTo(tooltip); // ניצור גם את האלמנט שיהיה החץ של הטולטיפ
        }
        else // אם יצרנו כבר את הטולטיפ בעבר, אז נסתפק בלהגדיר כמה משתנים וזהו
        {
            var tooltip = $('#tooltip'); // נגדיר את המשתנה של הטולטיפ בתור האלמנט שכבר קיים בף לפי האיידי
            var tooltipText = tooltip.find('span'); // נבחר את האלמנט שיכיל את הטקסט של הטולטיפ
            var tooltipArrow = tooltip.find('i'); // וכמובן שנבחר גם את האלמנט שיהיה החץ בטולטיפ

            /*
            טיפ: תשימו לב שהשתמשתי בפונקצית החיפוש במקום לרשום את הנתיב של הסלקטור. כלומר, במקום לעשות
            $('#tooltip span')
            העדפתי לחפש את הספאן בתוך האלמנט שכבר בחרנו. יש 2 סיבות לכך:
            1) דוגרי, כבר בחרנו את האלמנט הראשי, אז הנה כבר חסכנו חצי עבודה
            2) חיפוש באמצעות הפונקציה פינד יותר יעיל מאשר בחירה לפי הנתיב של הסלקטור מבחינת מהירות
            */
        }

        switch(action) // עכשיו, נבדוק איזו פעולה רצינו לבצע מלכתחילה
        {
            case 'show': // החל מכאן, נבצע את מה שיקרה כשנרצה להציג את הטולטיפ
                tooltipText.text(text); // כבר בהתחלה נגדיר את הטקסט בכדי שנוכל לדעת מה פחות או יותר הרוחב והגובה של הטולטיפ

                var offset = element.offset(); // נגדיר את המיקום הבלתי מוגדר של האלמנט שממנו יוצא הטולטיפ

                var top = offset.top - (tooltip.outerHeight()/2 - element.outerHeight()/2); // נחשב את המיקום מלמעלה בכך שנמרכז את הטולטיפ לאמצע של האלמנט שממנו נפתח הטולטיפ
                var left = offset.left - tooltip.outerWidth() - 5 - 2; // נמקם את הטולטיפ משמאלו של האלמנט שממנו הטולטיפ יוצא

                /*
                הערה: הורדתי בנוסף 5 פיקסלים בגלל הרוחב של החץ, ועוד 2 פיקסלים בשביל עוד רווח קטנטן
                */

                if(left < 1) // נבדוק אם הטולטיפ יוצא מהמסך בחלקו השמאלי
                {
                    tooltipArrow.addClass('left'); // נוסיף לחץ קלאס שישנה את הכיוון שלו לצד השני
                    left = offset.left + element.outerWidth() + 5 + 2 // נהפוך את המיקום השמאלי של הטולטיפ כך שיופיע מימינו של האלמנט
                }

                tooltip.css({ // כעת, נגדיר את המידות שחישבנו מקודם
                    left: left + 'px', // פה נגדיר את המיקום משמאל
                    top: top + 'px', // ופה נגדיר את המיקום מלמעלה
                    display: 'block' // אל תגידו ששכחתם שמישהו צריך לראות את כל מה שעשינו
                });

            break; // עד לפה החלטנו מה נעשה כשנרצה להציג את הטולטיפ

            case 'hide': // החל מפה נגדיר מה יקרה כשנרצה להסתיר את הטולטיפ
                tooltip.hide(); // קודם כל, כמובן שנרצה להסתיר אותו מהדף. ניתן להשתמש גם באפקטים חמודים, אני העדפתי שלא
                tooltipText.empty(); // נמחק את הטקסט שהופיע בתוך הטולטיפ, סתם שלא יהיה משהו מיותר בדף

                tooltipArrow.removeClass('left'); // אם בבדיקה מקודם שינינו את המיקום של החץ, כעת הרי שנרצה להחזירו בחזרה
            break; // פה נגמרת הפעולה של ההסתרה של הטולטיפ
        }
    };
})(jQuery);