Basic jScrollPane demo

by Ricardo Ruiz

HTML

<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/demo.css">
<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<div id="container">
  <div class="scroll-pane horizontal-only">
    <table id="bu">
      <tr>
        <td>Data</td>
        <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
          <div class="bubble">
            <a>Test</a>
            <br>
            <a>test</a>
          </div>

        </td>
      </tr>

      <tr>
        <td>Data</td>
        <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
          <div class="bubble">
            <a>Test</a>
            <br>
            <a>test</a>
          </div>

        </td>
      </tr>

      <tr>
        <td>Data Input</td>
        <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
          <div class="bubble">
            <a>Test</a>
            <br>
            <a>test</a>
          </div>

        </td>
      </tr>

      <tr>
        <td>Data Test</td>
        <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
          <div class="bubble">
            <a>Test</a>
            <br>
            <a>test</a>
          </div>

        </td>
      </tr>
    </table>
  </div>

</div>

CSS

/* Styles specific to this particular page */

#container2 {
  background: #eeeef4 none repeat scroll 0 0;
  border-radius: 5px;
  margin: 20px auto;
  padding: 20px;
  width: 250px;
}

.scroll-pane {
  width: 50%;
  height: 200px;
  overflow: auto;
}

.horizontal-only {
  height: auto;
  max-height: 200px;
}

.image {
  position: relative;
}

.image:hover .bubble {
  display: block;
}

.bubble {
  display: none;
  z-index: 10;
  position: absolute;
  border: solid 1px red;
  text-align: center;
  top: 40px;
  left: -20px;
  width: 75px;
  height: 80px;
  padding: 0px;
  background: #FFFFFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.bubble::before {
  content: '';
  width: 15px;
  height: 15px;
  background-color: inherit; /* Inherit container background */
  border-left: inherit; /* Inherit container border-left */
  border-top: inherit; /* Inherit container border-top */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc((-15px / 2) - 1px)) rotateZ(45deg); /* calc((-<pseudo-element width> / 2) - <border-width>)) */
  box-sizing: inherit;
}
.bubble > * {
  position: relative; /* Position direct children on top of pseudo-element */
}

td {
  width: 150px;
}

JavaScript

$(function() {
  $('.scroll-pane').jScrollPane();
});