Pure CSS Tooltips

index.html

<div class="container">
  <div class="row">
    <div class="col-xs-10 col-xs-offset-1">
      <div class="content">
        <h1>Pure CSS Tooltips</h1>
        <h2>Tooltips on Divs</h2>
        <div class="row">
          <div class="col-sm-3 col-xs-6 text-center">
            <div class="t-top t-sm bordered" data-tooltip="Top Tooltip">Div</div>
          </div>
          <div class="col-sm-3 col-xs-6 text-center">
            <div class="t-right t-sm bordered" data-tooltip="Right Tooltip">Div</div>
          </div>
          <div class="col-sm-3 col-xs-6 text-center">
            <div class="t-bottom t-sm bordered" data-tooltip="Bottom Tooltip">Div</div>
          </div>
          <div class="col-sm-3 col-xs-6 text-center">
            <div class="t-left t-sm bordered" data-tooltip="Left Tooltip">Div</div>
          </div>
        </div>
        <h2>Tooltips on Buttons</h2>
        <div class="row">
          <div class="col-sm-3 col-xs-6 text-center">
            <button class="t-top t-sm btn btn-block btn-success" data-tooltip="Top Tooltip">Button</button>
          </div>
          <div class="col-sm-3 col-xs-6 text-center">
            <button class="t-right t-sm btn btn-block btn-primary" data-tooltip="Right Tooltip">Button</button>
          </div>
          <div class="col-sm-3 col-xs-6 text-center">
            <button class="t-bottom t-sm btn btn-block btn-danger" data-tooltip="Bottom Tooltip">Button</button>
          </div>
          <div class="col-sm-3 col-xs-6 text-center">
            <button class="t-left t-sm btn btn-block btn-warning" data-tooltip="Left Tooltip">Button</button>
          </div>
        </div>
        <h2>Tooltips on Inputs</h2>
        <div class="row">
          <div class="col-sm-3 col-xs-6 text-center">
            <div class="t-top t-sm full-width" data-tooltip="Top Tooltip"><input class="form-control text-center" placeholder="Input" /></div>
          </div>
          <div class="col-sm-3 col-xs-6 text-center">
            <div class="t-right t-sm full-width" data-tooltip="Right Tooltip"><input class="form-control text-center" placeholder="Input" /></div>
          </div>
          <div class="col-sm-3 col-xs-6 text-center">
            <div class="t-bottom t-sm full-width" data-tooltip="Bottom Tooltip"><input class="form-control text-center" placeholder="Input" /></div>
          </div>
          <div class="col-sm-3 col-xs-6 text-center">
            <div class="t-left t-sm full-width" data-tooltip="Left Tooltip"><input class="form-control text-center" placeholder="Input" /></div>
          </div>
        </div>
        <h2>Tooltips on Links</h2>
        <div class="row">
          <div class="col-xs-12">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra augue quis consequat viverra. Sed pulvinar lacus urna. Nullam sed nisl semper, elementum nisl eu, semper ex. Vestibulum bibendum at neque id dictum. <a href="#" class="t-bottom t-sm"
                data-tooltip="Bottom Tooltip">Maecenas</a> at magna semper, malesuada libero faucibus, eleifend mauris. Nullam dignissim blandit justo, nec dictum risus dapibus at. In hac habitasse platea dictumst. Praesent nec nulla ullamcorper, commodo
              tellus id, consectetur metus. In euismod augue lectus, vitae pretium tortor auctor suscipit.</p>

            <p>Sed vulputate luctus metus sed varius. Aliquam auctor lobortis ante, nec dignissim sem sodales at. Sed sed dolor ex. Curabitur pharetra, nibh ut aliquam varius, nisl mi vulputate diam, eget scelerisque odio felis sed justo. Suspendisse odio
              ligula, semper ac dui vitae, hendrerit hendrerit felis. Ut vel rutrum nunc, sit amet euismod turpis. Suspendisse quis nisl consectetur, ullamcorper lacus non, euismod mi. Proin nec justo vel libero semper malesuada pellentesque eget sem.
              <a href="#" class="t-top t-sm" data-tooltip="Top Tooltip">Quisque</a> et lacus a dolor fermentum vestibulum ut non neque. Vivamus iaculis sodales interdum. Aliquam pretium tempor erat vel posuere. Nam tellus diam, ultricies at sollicitudin
              ut, hendrerit id quam. In viverra elementum ex nec congue.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

pure-css-tooltips.markdown

Pure CSS Tooltips

Custom css tooltips without JavaScript

A Pen by John Fink on CodePen.

License.

script.js

// Nope

style.less

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Pacifico');

body {
  background-color: #e0e0e0;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 21px;
  padding: 30px 0;
}

.content {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075), 0 2px 4px rgba(0, 0, 0, 0.0375);
  padding: 30px 30px 0;
}

h1 {
  color: #333;
  font-family: 'Pacifico', cursive;
  font-size: 28px;
  line-height: 42px;
  margin: 0 0 15px;
  text-align: center;
}

h2 {
  border-bottom: 1px solid #ddd;
  color: #aaa;
  font-size: 12px;
  line-height: 24px;
  margin: 0 0 15px;
  padding: 0;
  position: relative;
  text-align: center;
}

a {
  color: red !important;
  font-weight: bold;
}

div[class^="col"] {
  margin-bottom: 25px;
}

.bordered {
  background: #e2e2e2;
  border: 1px solid #ccc;
  padding: 5px 10px;
}

.full-width {
  width: 100%;
}

[data-tooltip] {
  position: relative;
  cursor: pointer;
  &:before, &:after {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all .15s cubic-bezier(.5, 1, .25, 1);
    z-index: 1;
  }
  &:before {
    padding: 5px;
    width: 110px;
    border-radius: 3px;
    background: #000;
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.2;
  }
  &:after {
    border: 8px solid transparent;
    width: 0;
    content: "";
    font-size: 0;
    line-height: 0;
  }
  &:hover:before, &:hover:after {
    visibility: visible;
    opacity: 1;
  }
  /********** Tooltip Sizes **********/
  &.t-xl:before {
    width: 200px;
  }
  &.t-lg:before {
    width: 170px;
  }
  &.t-md:before {
    width: 140px;
  }
  &.t-sm:before {
    width: 110px;
  }
  &.t-xs:before {
    width: 80px;
  }
  /********** Top Tooltip **********/
  &.t-top {
    &:before {
      bottom: 100%;
      left: 50%;
      margin-bottom: 5px;
      transform: translateX(-50%);
    }
    &:after {
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-top: 8px solid #000;
      border-bottom: none;
    }
    &:hover:before, &:hover:after {
      transform: translateX(-50%) translateY(-5px);
    }
  }
  /********** Right Tooltip **********/
  &.t-right {
    &:before {
      top: 50%;
      left: 100%;
      margin-left: 5px;
      transform: translateY(-50%);
    }
    &:after {
      top: 50%;
      left: 100%;
      transform: translateY(-50%);
      border-right: 8px solid #000;
      border-left: none;
    }
    &:hover:before, &:hover:after {
      transform: translateX(5px) translateY(-50%);
    }
  }
  /********** Bottom Tooltip **********/
  &.t-bottom {
    &:before {
      top: 100%;
      left: 50%;
      margin-top: 5px;
      transform: translateX(-50%);
    }
    &:after {
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-bottom: 8px solid #000;
      border-top: none;
    }
    &:hover:before, &:hover:after {
      transform: translateX(-50%) translateY(5px);
    }
  }
  /********** Left Tooltip **********/
  &.t-left {
    &:before {
      top: 50%;
      right: 100%;
      margin-right: 5px;
      transform: translateY(-50%);
    }
    &:after {
      top: 50%;
      right: 100%;
      transform: translateY(-50%);
      border-left: 8px solid #000;
      border-right: none;
    }
    &:hover:before, &:hover:after {
      transform: translateX(-5px) translateY(-50%);
    }
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />