Search code examples
csstooltip

Auto-position CSS Tooltip according to element?

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?

Solution

  • 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>