An example of a tooltip pagination created with HTML <div> tag

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #070e6b;
      }
      .pagination {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 15px;
        margin: auto;
        text-align: center;
      }
      .pagination__dot {
        position: relative;
        width: 12px;
        height: 12px;
        border: 2px solid #8a0e9e;
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        margin: 0 5px;
        transition: .3s;
      }
      .pagination__dot--active {
        background: #8a0e9e;
      }
      .pagination__dot:hover {
        transition: .3s;
        border-color: #eeeeee;
        background: #eeeeee;
      }
      .pagination__dot:hover:before {
        top: -48px;
        opacity: 1;
      }
      .pagination__dot:hover:after {
        top: -18px;
        opacity: 1;
      }
      .pagination__dot:before {
        position: absolute;
        top: -40px;
        left: -36px;
        background: #eeeeee;
        width: 80px;
        font-family: "Montserrat";
        font-size: 16px;
        padding: 8px 0;
        border-radius: 5px;
        content: attr(data-tooltip);
        opacity: 0;
        transition: .2s;
      }
      .pagination__dot:after {
        position: absolute;
        width: 0;
        height: 0;
        top: -10px;
        left: -2px;
        border-top: 8px solid white;
        border-right: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 8px solid transparent;
        content: "";
        opacity: 0;
        transition: .2s;
      }
    </style>
  </head>
  <body>
    <div class="pagination">
      <div data-tooltip="Tooltip 1" class="pagination__dot pagination__dot--active"></div>
      <div data-tooltip="Tooltip 2" class="pagination__dot"></div>
      <div data-tooltip="Tooltip 3" class="pagination__dot"></div>
      <div data-tooltip="Tooltip 4" class="pagination__dot"></div>
      <div data-tooltip="Tooltip 5" class="pagination__dot"></div>
    </div>
  </body>
</html>