איך מגדירים טולטיפ ביופיע ביחס למילה?

[אהרן2]

position:relative
מזיז גם את מילה האם.
https://jsfiddle.net/qckhbnqo/

תודות מראש!

 

[אהרן2]

תודה על העזרה
ב"ה הבנתי הרבה דברים הלילה, וזוהי דוגמא מעודכנת יותר.

עדיין אשמח להסבר איך מגדירים את הטולטיפ שאני מייצר באמצעות CSS שימוקם ביחס למילת האם.
וגם, מה הסיבה שבשורה השניה הטולטיפ לא מופיע.

תודה!!

 

[ycprog]

בס"ד

בבקשה
html

      text row 3    msg row 3        text row 4    msg row 4

css

    .text{     position: relative;   height: 40px;   margin: 5px 0;    }  .msg{    display: none;    position: absolute;    top: 20px;    left: 0;    text-align: center;    background-color: #8080FF;    color:#fff;  }    .text:hover .msg{    display: inline-block;  }

תוכל לשחק עם left, top של מחלקה .msg כדי לקבוע מיקום לתיבה של ההודעה.

 

[אהרן2]

בס"ד

בבקשה
html

      text row 3    msg row 3        text row 4    msg row 4

css

    .text{     position: relative;   height: 40px;   margin: 5px 0;    }  .msg{    display: none;    position: absolute;    top: 20px;    left: 0;    text-align: center;    background-color: #8080FF;    color:#fff;  }    .text:hover .msg{    display: inline-block;  }

תוכל לשחק עם left, top של מחלקה .msg כדי לקבוע מיקום לתיבה של ההודעה.

כלומר זה אפשרי רק בדיבים נפרדים?

 

[ycprog]

בס"ד

בבקשה אהרון המערכת כאן מורידה את html

http://jsfiddle.net/ycohen/8v940wwn/

<iframe width="100%" height="300" src="//jsfiddle.net/ycohen/8v940wwn/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

 

[אהרן2]

בס"ד

בבקשה אהרון המערכת כאן מורידה את html

http://jsfiddle.net/ycohen/8v940wwn/

<iframe width="100%" height="300" src="//jsfiddle.net/ycohen/8v940wwn/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

ובקטע רציף?
כמו כאן
https://jsfiddle.net/qckhbnqo/20/

 

[ycprog]

בס"ד

לא הבנתי את השאלה?

 

[אהרן2]

<iframe width="100%" height="300" src="//jsfiddle.net/qckhbnqo/23/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe><

 

[אהרן2]

בכזה מבנה HTML כזה גם אפשרי שזה שהטולטיפ יופיע בהתאמה למילה, גם בגובה (שורה) וגם ברוחב (מילה)?

 

[ycprog]

תוכל אבל תצטרך לשנות את הקוד קצת, כל שורה תהיה בתוך div משלה כדי שההודעה תהיה ביחס לאותו div

<iframe src="//jsfiddle.net/ycohen/qckhbnqo/49/embedded/" allowfullscreen="allowfullscreen" width="100%" frameborder="0" height="300"></iframe>

 

[אהרן2]

מה חייב להיות בדיב נפרד
כל מילה או כל שורה?
א"א שבתוך אותו דיב הוא יתיחס לספאן עליו עומדים עם העכבר?

 

[ycprog]

תסתכל על הקוד ששלחתי לך.

יש דיב ראשי relative, בתוכו יש span-טקסט כאשר אתה עומד עליו הוא מציג הודעה לפי data-title שיש ב span-בטקסט.

ההודעה נכנסת בעזרת ה css selector hover לאחר span-טקסט זאת אומרת היא בתוך ה דיב הראשי ולכן היא מיוחסת אליו.


מבנה ההודעה יהיה כזה
<iframe src="//jsfiddle.net/ycohen/hLqd01qr/1/embedded/" allowfullscreen="allowfullscreen" width="100%" frameborder="0" height="300"></iframe>

כל שורה עם הודעה נוספת שתרצה תצטרך לוהסיף מחדש את ה-div עם ה-span שבתוכו.

 

[אהרן2]

תודה לחבר הפורום שעזר לי בפרטי.
זה אפשרי.
https://jsfiddle.net/qckhbnqo/58/

אם מתחשק למישהו להסתכל רגע
מדוע הסלקשן של השורה השניה לא עובד?

 

[ycprog]

בבקשה קצת תשנה את הקוד

<iframe width="100%" height="300" src="//jsfiddle.net/qckhbnqo/63/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

 

[אהרן2]

שתהיה בריא
השינוי הוא בכוונה
ומנסיון העבר, אני חושב שישנה אפשרות לבחור את הספאן'ים גם בצורה כזו.

השלאה איפה אני שוגה?

 

[ycprog]

בס"ד

הבנתי. בבקשה

<iframe width="100%" height="300" src="//jsfiddle.net/qckhbnqo/79/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

 

[אהרן2]

תודה על התשובות במאור פנים!!

ובלי מאפיין כלל בספאן, אפשר לבחור את כל הספאן'ים האנונימים לפי דיב האב?

 

[ycprog]

בס"ד

אתה מתכוון לזה?

<iframe width="100%" height="300" src="//jsfiddle.net/qckhbnqo/83/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>