semantic-ui.html

<!doctype html>
<html ng-app="720kb">
<head>
  <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.5.2/semantic.min.css">
  <link rel="stylesheet" type="text/css" href="src/css/angular-tooltips.css">
  <title>Semantic-UI Tooltips</title>
</head>
<body class="center-content" style="margin:50px auto; float:none; max-width:200px;">
  <div class="ui divider"></div>
  <div class="col6 offset-left2">
    <div class="ui button" tooltips tooltip-content="Yeo man!" tooltip-size="small" tooltip-side="left">
        Small left
    </div>
    <div class="ui divider"></div>

    <div class="ui teal button" tooltips tooltip-content="Yeo man!" tooltip-size="medium" tooltip-side="left">
        Medium left
    </div>

    <div class="ui divider"></div>
    <div class="ui green button" tooltips tooltip-content="Yeo man!" tooltip-size="large" tooltip-side="left">
        Large left
    </div>

    <div class="ui divider"></div>
    <div class="ui button" tooltips tooltip-content="Yeo man!" tooltip-size="small" tooltip-side="right">
        Small right
    </div>
    <div class="ui divider"></div>

    <div class="ui teal button" tooltips tooltip-content="Yeo man!" tooltip-size="medium" tooltip-side="right">
        Medium right
    </div>

    <div class="ui divider"></div>

    <div class="ui green button" tooltips tooltip-content="Yeo man!" tooltip-size="large" tooltip-side="right">
        Large right
    </div>

    

    <div class="ui divider"></div>
    <div class="ui button" tooltips tooltip-content="Yeo man!" tooltip-size="small" tooltip-side="top">
        Small top
    </div>
    <div class="ui divider"></div>

    <div class="ui teal button" tooltips tooltip-content="Yeo man!" tooltip-size="medium" tooltip-side="top">
        Medium top
    </div>

    <div class="ui divider"></div>
    <div class="ui green button" tooltips tooltip-content="Yeo man!" tooltip-size="large" tooltip-side="top">
        Large top
    </div>

    <div class="ui divider"></div>
    <div class="ui button" tooltips tooltip-content="Yeo man!" tooltip-size="small" tooltip-side="bottom">
        Small bottom
    </div>
    <div class="ui divider"></div>

    <div class="ui teal button" tooltips tooltip-content="Yeo man!" tooltip-size="medium" tooltip-side="bottom">
        Medium bottom
    </div>

    <div class="ui divider"></div>
    <div class="ui green button" tooltips tooltip-content="Yeo man!" tooltip-size="large" tooltip-side="bottom">
        Large bottom
    </div>
    <div class="ui divider"></div>
  </div>

  <table class="ui small sortable padded table segment">
    <thead>
      <tr>
        <th class="two wide">pos</th>
        <th class="three wide">val1</th>
        <th class="one wide">val2</th>
        <th class="five wide">val3</th>
      </tr>
      </thead>
      <tbody>
        <tr>
          <td><a tooltips tooltip-content="Yeo man!" tooltip-side="top">top</a></td>
          <td>111</td>
          <td>222</td>
          <td>333</td>
        </tr>
        <tr>
          <td><a tooltips tooltip-content="Yeo man!" tooltip-side="bottom">bottom</a></td>
          <td>111</td>
          <td>222</td>
          <td>333</td>
        </tr>
        <tr>
          <td><a tooltips tooltip-content="Yeo man!" tooltip-side="left">left</a></td>
          <td>111</td>
          <td>222</td>
          <td>333</td>
        </tr>
        <tr>
          <td><a tooltips tooltip-content="Yeo man!" tooltip-side="right">right</a></td>
          <td>111</td>
          <td>222</td>
          <td>333</td>
        </tr>
      </tbody>
    </table>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-route.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.5.2/semantic.min.js"></script>
  <script type="text/javascript" src="src/js/angular-tooltips.js"></script>
  <script type="text/javascript" src="assets/js/index.js"></script>
</body>
</html>