Auto-Position CSS Tooltip nach Element?

Question

Ich habe diese CSS Werkzeugspitze gebaut:

DEMO

CSS:

.help { 
    position: relative 
} 

.help .help-text { 
    display: none; 
    background-color: #FDFCEF; 
    border: 1px solid #E8E5C1; 
    border-radius: 4px; 
    color: #333; 
    font-size: 12px; 
    font-weight: 400; 
    padding: 5px; 
    white-space: normal; 
    position: absolute; 
    z-index: 1000; 
    box-shadow: 0 1px 3px 3px rgba(0, 0, 0, .05); 
    transition: all .3s ease; 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -ms-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    margin-left: 60px; 
    margin-top: 12px; 
    line-height: 1.2 
} 

.help .help-text:after, 
.help .help-text:before { 
    bottom: 100%; 
    left: 50%; 
    left: 13%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none 
} 

.help .help-text:after { 
    border-color: transparent transparent #FDFCEF; 
    border-width: 8px; 
    margin-left: -8px 
} 

.help .help-text:before { 
    border-color: transition transition #E8E5C1; 
    border-width: 10px; 
    margin-left: -10px 
} 

.help:hover .help-text { 
    display: block 
} 

.help-text { 
    width: 185px 
} 

.help-icon { 
    padding-left: 3px; 
    color: #789cbf; 
    font-size: .9em!important; 
    vertical-align: 0!important; 
    cursor: help 
} 

.other { 
    display: inline 
} 

p.inline { 
    display: inline-block 
} 

.inline { 
    display: inline-block 
} 

.box { 
    font-size: .65em; 
    color: #FFF; 
    background-color: #00cc4f; 
    font-weight: 700; 
    width: 97px; 
    height: 18px; 
    padding-top: 3px; 
    margin-top: 5px; 
    padding-bottom: 4px; 
    text-align: center; 
    font-family: 'Open Sans', sans-serif; 
    cursor: help 
} 

HTML:

<table border="1"> 
    <col style="width:128px;" /> 
    <col style="width:216px;" /> 
    <col style="width:280px;" /> 
      <thead> 
     <tr> 
     <th>4</th> 
     <th>5</th> 
     <th>6</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td> 
      <p class="inline">Sample A</p><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></span> 

       <span class="help"><div class="box">SAMPLE BOX</div><div class="help-text">im ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.</div></span> 


      <div>aaa</div>             
      <div class="other">Sample B</div><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.</div></span>      
     </td> 
     <td> 
     </td> 
     <td><ul> 
       <li class="inline">Another Sample: C</li> 
       <span class="help"> 
       <span class="fa fa-question-circle fa-lg help-icon"></span> 
       <div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div> 
       </span> 
       <li class="inline">Yet Another Great Sample - D:</li> 
       <span class="help"> 
       <span class="fa fa-question-circle fa-lg help-icon"></span> 
       <div class="help-text">r sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dol ssssssssssssssss</div> 
       </span>  
       </ul> 
     </td> 
     </tr>  
    </tbody> 
    </table> 

Wie Sie für jede Probe sehen können, kommt die Positionierung aus verschiedenen .

Ich möchte es nach dem Element mit der Spitze positioniert werden.

Ist dieser Code auch eine gute Vorgehensweise? funktioniert es auch gut auf Tablet? oder sollte ich etwas ändern?

Ist es auch besser, einen Java-Skript-basierten Tool-Tipp zu verwenden? Wenn ja, welches ist meinem jetzigen am nächsten?

Answer 1

ändern margin-left: 60px; margin-top: 12px; zu left: -15px; top: calc(100% + 5px);

ich die Syntaxfehler korrigiert auch span als direktes Kind von ul

.help { 
 
    position: relative 
 
} 
 

 
.help .help-text { 
 
    display: none; 
 
    background-color: #FDFCEF; 
 
    border: 1px solid #E8E5C1; 
 
    border-radius: 4px; 
 
    color: #333; 
 
    font-size: 12px; 
 
    font-weight: 400; 
 
    padding: 5px; 
 
    white-space: normal; 
 
    position: absolute; 
 
    z-index: 1000; 
 
    box-shadow: 0 1px 3px 3px rgba(0, 0, 0, .05); 
 
    transition: all .3s ease; 
 
    -webkit-transition: all .3s ease; 
 
    -moz-transition: all .3s ease; 
 
    -ms-transition: all .3s ease; 
 
    -o-transition: all .3s ease; 
 
    left: -15px; 
 
    top: calc(100% + 5px); 
 
    line-height: 1.2 
 
} 
 

 
.help .help-text:after, 
 
.help .help-text:before { 
 
    bottom: 100%; 
 
    left: 50%; 
 
    left: 13%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none 
 
} 
 

 
.help .help-text:after { 
 
    border-color: transparent transparent #FDFCEF; 
 
    border-width: 8px; 
 
    margin-left: -8px 
 
} 
 

 
.help .help-text:before { 
 
    border-color: transition transition #E8E5C1; 
 
    border-width: 10px; 
 
    margin-left: -10px 
 
} 
 

 
.help:hover .help-text { 
 
    display: block 
 
} 
 

 
.help-text { 
 
    width: 185px 
 
} 
 

 
.help-icon { 
 
    padding-left: 3px; 
 
    color: #789cbf; 
 
    font-size: .9em!important; 
 
    vertical-align: 0!important; 
 
    cursor: help 
 
} 
 

 
.other { 
 
    display: inline 
 
} 
 

 
p.inline { 
 
    display: inline-block 
 
} 
 

 
.inline { 
 
    display: inline-block 
 
} 
 

 
.box { 
 
    font-size: .65em; 
 
    color: #FFF; 
 
    background-color: #00cc4f; 
 
    font-weight: 700; 
 
    width: 97px; 
 
    height: 18px; 
 
    padding-top: 3px; 
 
    margin-top: 5px; 
 
    padding-bottom: 4px; 
 
    text-align: center; 
 
    font-family: 'Open Sans', sans-serif; 
 
    cursor: help 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
     <table border="1"> 
 
     <col style="width:128px;" /> 
 
     <col style="width:216px;" /> 
 
     <col style="width:280px;" /> 
 
       <thead> 
 
      <tr> 
 
      <th>4</th> 
 
      <th>5</th> 
 
      <th>6</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td> 
 
       <p class="inline">Sample A</p><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></span> 
 
       
 
        <span class="help"><div class="box">SAMPLE BOX</div><div class="help-text">im ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.</div></span> 
 
        
 
        
 
       <div>aaa</div>             
 
       <div class="other">Sample B</div><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.</div></span>      
 
      </td> 
 
      <td> 
 
      </td> 
 
      <td><ul> 
 
        <li class="inline">Another Sample: C 
 
        <span class="help"> 
 
        <span class="fa fa-question-circle fa-lg help-icon"></span> 
 
        <div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div> 
 
        </span></li> 
 
        <li class="inline">Yet Another Great Sample - D: 
 
        <span class="help"> 
 
        <span class="fa fa-question-circle fa-lg help-icon"></span> 
 
        <div class="help-text">r sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dol ssssssssssssssss</div> 
 
        </span></li> 
 
        </ul> 
 
      </td> 
 
      </tr>  
 
     </tbody> 
 
     </table>

Answer 2

Stellen Sie .help-text in .fa-question-circle ein. Auf diese Weise wird der Hilfetext relativ zum übergeordneten Element positioniert. Dann müssen Sie nur den Rand nach links auf -20px ändern und fertig.

<div class="fa fa-question-circle fa-lg help-icon"> 
    <span class="help-text">r sit amet, </span> 
</div> 

here ist die Arbeitsgeige. Die ersten beiden Tooltips sind unverändert, die anderen beiden sind behoben.

Answer 3

sein muss, was Dies scheint Sie wollen: https://jsfiddle.net/x02exd59/3/.

Zuerst habe ich einige HTML-Änderungen vorgenommen. Ihr absolut positioniertes Element (der QuickInfo-Text) wird relativ zum übergeordneten Element angezeigt. Das heißt, wenn wir das Glyphicon zum übergeordneten Element machen, wird es basierend auf dem Symbol angezeigt.

Zweitens überprüfte ich das CSS, um sicherzustellen, dass das Glyphon Position: relativ hatte; und der Infotext hatte die Position: absolut;

Drittens habe ich die Platzierung des Info-Textes mit den oberen: und links: Werten verfeinert. (Ich habe auch die Position des Pfeilelement, das Sie links erstellt. 25px)

HTML

<table border="1"> 
    <col style="width:128px;" /> 
    <col style="width:216px;" /> 
    <col style="width:280px;" /> 
      <thead> 
     <tr> 
     <th>4</th> 
     <th>5</th> 
     <th>6</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td> 
      <p class="inline">Sample A</p><i class="help fa fa-question-circle fa-lg help-icon"><span class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</span></i> 

       <div class="help box">SAMPLE BOX<span class="help-text">im ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.</span></div> 


      <div>aaa</div>             
      <div class="other">Sample B<span class="help fa fa-question-circle fa-lg help-icon"><span class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.</span></span></div>      
     </td> 
     <td> 
     </td> 
     <td><ul> 
       <li class="inline">Another Sample: C</li> 
       <span class="help"> 
       <span class="fa fa-question-circle fa-lg help-icon"></span> 
       <div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div> 
       </span> 
       <li class="inline">Yet Another Great Sample - D:</li> 
       <span class="help"> 
       <span class="fa fa-question-circle fa-lg help-icon"></span> 
       <div class="help-text">r sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dol ssssssssssssssss</div> 
       </span>  
       </ul> 
     </td> 
     </tr>  
    </tbody> 
    </table> 

CSS

.help { 
    position: relative 
    ; 
} 

.help .help-text { 
    display: none; 
    background-color: #FDFCEF; 
    border: 1px solid #E8E5C1; 
    border-radius: 4px; 
    color: #333; 
    font-size: 12px; 
    font-weight: 400; 
    padding: 5px; 
    white-space: normal; 
    position: absolute; 
    left: 0px; 
    z-index: 1000; 
    box-shadow: 0 1px 3px 3px rgba(0, 0, 0, .05); 
    transition: all .3s ease; 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -ms-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    margin-left: -15px; 
    margin-top: 12px; 
    line-height: 1.2 
} 

.help .help-text:after, 
.help .help-text:before { 
    bottom: 100%; 
    left: 50%; 
    left: 25px; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none 
} 

.help .help-text:after { 
    border-color: transparent transparent #FDFCEF; 
    border-width: 8px; 
    margin-left: -8px 
} 

.help .help-text:before { 
    border-color: transition transition #E8E5C1; 
    border-width: 10px; 
    margin-left: -10px; 
} 

.help:hover .help-text { 
    display: block 
} 

.help-text { 
    width: 185px 
} 

.help-icon { 
    padding-left: 3px; 
    color: #789cbf; 
    font-size: .9em!important; 
    vertical-align: 0!important; 
    cursor: help 
} 

.other { 
    display: inline 
} 

p.inline { 
    display: inline-block 
} 

.inline { 
    display: inline-block 
} 

.box { 
    font-size: .65em; 
    color: #FFF; 
    background-color: #00cc4f; 
    font-weight: 700; 
    width: 97px; 
    height: 18px; 
    padding-top: 3px; 
    margin-top: 5px; 
    padding-bottom: 4px; 
    text-align: center; 
    font-family: 'Open Sans', sans-serif; 
    cursor: help 
}