css tool tip hint--top is not working

Question

I am using this css-hint library along with some bootstrap left-hand and right-hand icons. I declared the css tool tip class as bottom, and it is working. But if I declare the tool tip as class="hint-top or class="hint-top or class="hint-right it is not working. By default, it is showing bottom for all files. Not sure what might be the issue. Here is my code.

<div class="pre-btn" class="hint--top  hint--error" data-hint="Previous Page!">
  <a href="/jquery/jquery-basics" class="glyphicon glyphicon-hand-left "></a>
</div>
<div class="nxt-btn" class="hint--top" data-hint="Next page">
<a href="/jquery/jquery-selectors"  class="glyphicon glyphicon-hand-right"></a><br />
</div>

Note: I am using css tool tip hint version Hint.css - v1.3.4 - 2015-02-28

Answer 1

You have two separate classes declared, you need to combine those:

This >

class="pre-btn" class="hint--top  hint--error"

Should be this >

class="hint--top  hint--error pre-btn"

body,
html {
  margin: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<link href="https://cdn.jsdelivr.net/hint.css/1.3.2/hint.min.css" rel="stylesheet" />
<div class="hint--top  hint--error pre-btn" data-hint="Previous Page!">
  <a href="/jquery/jquery-basics" class="glyphicon glyphicon-hand-left "></a>

</div>
<p>These are tooltips.</p>
<div class="hint--bottom nxt-btn" data-hint="Next page">
  <a href="/jquery/jquery-selectors" class="glyphicon glyphicon-hand-right"></a>

  
</div>