{{ enablePlugins('prettify') }}
{% set title = "Tooltips" %}

{% extends "layouts/application.html" %}


{% block content %}
  {% include "shared/page-title.html" %}

  <div class="card-panel">
    Tooltips are small, interactive, textual hints for mainly graphical elements. When using icons for actions you can use a tooltip to give people clarification on its function.
  </div>

  <div class="card-panel">
    <div class="row">
      <div class="col s4 offset-s4 l2">
        <a class="btn tooltipped" data-position="bottom" data-delay="0" data-tooltip="I am tooltip"> Bottom Tooltip</a>
      </div>
      <div class="col s4 offset-s4 l2 offset-l1">
        <a class="btn tooltipped" data-position="top" data-delay="50" data-tooltip="I am tooltip"> Top Tooltip</a>
      </div>
      <div class="col s4 offset-s4 l2 offset-l1">
        <a class="btn tooltipped" data-position="left" data-delay="50" data-tooltip="I am tooltip"> Left Tooltip</a>
      </div>
      <div class="col s4 offset-s4 l2 offset-l1">
        <a class="btn tooltipped" data-position="right" data-delay="50" data-tooltip="I am tooltip"> Right Tooltip</a>
      </div>
    </div>

    <div class="row"></div>
    <p>Add the Tooltipped class to your element and add either top, bottom, left, right on data-tooltip to control the position.</p>

    <pre class="prettyprint linenums">
&lt;!-- data-position can be : bottom, top, left, or right -->
&lt;!-- data-delay controls delay before tooltip shows (in milliseconds)-->
&lt;a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Hover me!&lt;/a></pre>
  </div>

{% endblock %}