Basic jScrollPane demo

by livewirerules

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:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -15px;
top: -15px;
left: 50%;
}

td {
    width: 150px;
}

JavaScript

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