Auto-position CSS Tooltip according to element?

Question

I have built this CSS tool tip:

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>

As you can see, for each sample the positioning comes out different.

I want it to be positioned according to the element containing the tip.

Also, is this code a good practice? does it work well on tablet as well? or should I some modification?

Also, is it better to use a java script based tool-tip? If so, which is the closest to my current one?

Answer 1

This seems to be what you want: https://jsfiddle.net/x02exd59/3/ .

First I made some HTML changes. Your absolute positioned element (the tooltip text) will display relative to its parent. This means that if we make the glyphicon its parent, it will display based on where the icon is.

Secondly I checked the CSS to make sure the glyphicon had position: relative; and the info-text had position: absolute;.

Thirdly I fine-tuned the placement of the info-text with the top: and left: values. (I also changed the position of the arrow element you created to left: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
}

Answer 2

Change your margin-left: 60px; margin-top: 12px; to left: -15px; top: calc(100% + 5px);

I also corrected the syntax error having span as a direct child of 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 3

Set .help-text inside .fa-question-circle. This way help text will be positioned relative to its parent element. Then you just have to change margin-left to -20px and you're done.

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

here's the working fiddle. first two tooltips are unchanged, the other two are fixed.