formstone/src/docs/tooltip.html

Library of modular front end components.

<h4>Basic</h4>

<!-- START: FIRSTDEMO -->

<style>
  .center { text-align: center; }

  .tooltips { margin: 20px 0; overflow: hidden; }

  .tooltip { background: #00bcd4; border-radius: 3px; color: #fff; clear: both; display: block; height: 50px; line-height: 50px; margin: 0 auto 10px; text-align: center; width: 50%; }
  .long_text .fs-tooltip-content { width: 250px; white-space: normal; }
</style>

<div class="demo_container">
  <div class="demo_example">
    <div class="tooltips">
      <div class="tooltip js-tooltip" data-title="Left Tooltip"   data-tooltip-options='{"direction":"left"}'>Left</div>
      <div class="tooltip js-tooltip" data-title="Right Tooltip"  data-tooltip-options='{"direction":"right"}'>Right</div>
      <div class="tooltip js-tooltip" data-title="Top Tooltip"    data-tooltip-options='{"direction":"top"}'>Top</div>
      <div class="tooltip js-tooltip" data-title="Bottom Tooltip" data-tooltip-options='{"direction":"bottom"}'>Bottom</div>
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;a href=&quot;page.html&quot; class=&quot;tooltip&quot; data-title=&quot;Tooltip Content&quot;&gt;Tooltip Handle&lt;/a&gt;</code></pre>
    <pre><code class="language-javascript">$(".tooltip").tooltip({
  direction: "top"
});</code></pre>
  </div>
</div>

<!-- END: FIRSTDEMO -->

<h4>Follow</h4>
<div class="demo_container">
  <div class="demo_example">
    <div class="tooltips">
      <div class="tooltip js-tooltip" data-title="Left Tooltip"    data-tooltip-options='{"direction":"left","follow":"true"}'>Left</div>
      <div class="tooltip js-tooltip" data-title="Right Tooltip"   data-tooltip-options='{"direction":"right","follow":"true"}'>Right</div>
      <div class="tooltip js-tooltip" data-title="Top Tooltip"     data-tooltip-options='{"direction":"top","follow":"true"}'>Top</div>
      <div class="tooltip js-tooltip" data-title="Bottom Tooltip"  data-tooltip-options='{"direction":"bottom","follow":"true"}'>Bottom</div>
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;a href=&quot;page.html&quot; class=&quot;tooltip&quot; data-title=&quot;Tooltip Content&quot;&gt;Tooltip Handle&lt;/a&gt;</code></pre>
    <pre><code class="language-javascript">$(".tooltip").tooltip({
  direction: "left",
  follow: true
});</code></pre>
  </div>
</div>

<h4>Match</h4>
<div class="demo_container">
  <div class="demo_example">
    <div class="tooltips">
      <div class="tooltip js-tooltip" data-title="Left Tooltip"    data-tooltip-options='{"direction":"left","match":"true"}'>Left</div>
      <div class="tooltip js-tooltip" data-title="Right Tooltip"   data-tooltip-options='{"direction":"right","match":"true"}'>Right</div>
      <div class="tooltip js-tooltip" data-title="Top Tooltip"     data-tooltip-options='{"direction":"top","match":"true"}'>Top</div>
      <div class="tooltip js-tooltip" data-title="Bottom Tooltip"  data-tooltip-options='{"direction":"bottom","match":"true"}'>Bottom</div>
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;a href=&quot;page.html&quot; class=&quot;tooltip&quot; data-title=&quot;Tooltip Content&quot;&gt;Tooltip Handle&lt;/a&gt;</code></pre>
    <pre><code class="language-javascript">$(".tooltip").tooltip({
  direction: "bottom",
  match: true
});</code></pre>
  </div>
</div>

<h4>Delay</h4>
<div class="demo_container">
  <div class="demo_example">
    <div class="tooltips">
      <div class="tooltip js-tooltip" data-title="Left Tooltip"    data-tooltip-options='{"direction":"left","delay":"500"}'>Left</div>
      <div class="tooltip js-tooltip" data-title="Right Tooltip"   data-tooltip-options='{"direction":"right","delay":"500"}'>Right</div>
      <div class="tooltip js-tooltip" data-title="Top Tooltip"     data-tooltip-options='{"direction":"top","delay":"500"}'>Top</div>
      <div class="tooltip js-tooltip" data-title="Bottom Tooltip"  data-tooltip-options='{"direction":"bottom","delay":"500"}'>Bottom</div>
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;a href=&quot;page.html&quot; class=&quot;tooltip&quot; data-title=&quot;Tooltip Content&quot;&gt;Tooltip Handle&lt;/a&gt;</code></pre>
    <pre><code class="language-javascript">$(".tooltip").tooltip({
  direction: "right",
  delay: 500
});</code></pre>
  </div>
</div>

<!-- <h4>Long Text</h4>
<div class="demo_container">
  <div class="demo_example">
    <div class="tooltips">
      <div class="tooltip js-tooltip" data-title="Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. " data-tooltip-options='{"customClass":"long_text","direction":"top"}'>Left</div>
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html"></code></pre>
    <pre><code class="language-javascript">$(".tooltip").tooltip({

});</code></pre>
  </div>
</div> -->

<h4>No Theme</h4>
<div class="demo_container">
  <div class="demo_example">
    <div class="tooltips">
      <div class="tooltip js-tooltip" data-title="No Theme" data-tooltip-options='{"theme":"","direction":"bottom"}'>No Theme</div>
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;a href=&quot;page.html&quot; class=&quot;tooltip&quot; data-title=&quot;Tooltip Content&quot;&gt;Tooltip Handle&lt;/a&gt;</code></pre>
    <pre><code class="language-javascript">$(".tooltip").tooltip({
  direction: "top",
  theme: ""
});</code></pre>
  </div>
</div>