index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tipfy</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, minimum-scale=1" />
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
  <link rel="stylesheet" href="css/tipfy.min.css">
  <style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    body{font-family: Arial, Helvetica, sans-serif;}
    @keyframes logo {
      0% {opacity: 0;transform: rotateX(90deg) translate(100px, 50px) scale(0);}
      100% {opacity: 1;transform: rotateX(0deg) translate(0px, 0px) scale(1);}
    }
    @keyframes logo-2 {
      0% {fill: #fefefe;}
      100% {fill: #e66;}
    }
    .screen--full{min-height: 75vh;background-image: radial-gradient(circle at center, #eee 50%, #aaa 100%);display: flex;align-items: center;}
    .screen--content{width: 100%;text-align: center;}
    .screen--logo{width: 100%;max-width: 300px;margin: 0 auto;display: block;perspective: 100px;transform-origin: 0% 0%;}
    .screen--logo .st0{fill:#221F20;}
    .screen--logo .st1{fill:#fefefe;}
    .screen--logo .st1{transform-origin: 0% 0%;}
    .screen--tools{position: absolute;right: 10px;top: 10px;}
    .screen--btn{text-decoration: none;background-color: #e66;color: #fff;padding: 8px 20px;border-radius: 4px;font-size: 14px;border: 1px solid #c66;box-shadow: 0 -1px 0px rgba(255,255,255,.2) inset;font-family: 'Dosis', sans-serif;font-weight: bold;display: inline-block;}
    .screen--btn:hover{background-color: #e33;border: 1px solid #c33;}
    .screen--subtitle{width: 100%;text-align: center;font-family: 'Dosis', sans-serif;color: #e33;font-weight: lighter;font-size: 30px;margin-top: 50px;}
    .screen--subtitle-strong{font-weight: bold;}
    .screen--info{cursor: help;}
    .letter-1{animation: logo .3s;}
    .letter-2{animation: logo .6s;}
    .letter-3{animation: logo .9s;}
    .letter-4{animation: logo 1.2s, logo-2 .5s 1.4s forwards;}
    .letter-5{animation: logo 1.3s, logo-2 .5s 1.4s forwards;}
    .page{padding: 40px 100px;background-color: #fff;font-family: Arial, Helvetica, sans-serif;color: #222;}
    .page a{color: #ee7517;text-decoration: none;}
    .page a:hover{color: #000;}
    .page--input{width: 100%;padding: 10px;font-size: 20px;border-radius: 4px;border: 1px solid #ccc;}
    .page--title{font-size: 28px;margin-top: 30px;}
    .page--bigtitle{font-size: 40px;margin-bottom: 5px;}
    .page--subtitle{font-size: 23px;margin-bottom: 10px;}
    .page--contain{margin: 10px 0;background-color: #f6f6f6;padding: 10px;border-radius: 4px;}
    .page--minititle{margin-top: 20px;font-size: 20px;}
    .page--minititle-small{font-size: 15px;}
    .page code{background-color: #222;display: block;padding: 5px;color: #fff;border-radius: 3px;white-space: pre;margin-bottom: 3px;}
    .page p{margin-bottom: 5px;}
    .page--tag{color: #f92672;}
    .page--attr{color: #a6e22e;}
    .page--value{color: #e6db74;}
    .page--list{margin: 5px 30px 10px;font-weight: bold;list-style-type: circle;}
    .page--default{font-weight: lighter;}
    .page--important{color: #66d9ef;font-weight: bold;font-style: italic;}
    .class--custom{background-color: #fff;color: #e66;box-shadow: 0 0 20px #000;font-family: Courier New, Courier New, monospace;text-transform: uppercase;font-size: 20px;}
    .class--custom.tipfy--left.tipfy--top:before{border-bottom-color: #fff;}
    .class--custom.tipfy--left.tipfy--bottom:before{border-top-color: #fff;}
    .class--custom.tipfy--side-right:before{border-right-color: #fff;}
    .example--item{display: flex;align-items: center;margin-bottom: 4px;}
    .example--text{border: 4px solid #222;line-height: 42px;padding: 0 20px;background-color: #222;color: #fff;border-radius: 4px 0 0 4px;border-right-style: none;}
    .example--text-small{line-height: normal;}
    .example--icon{width: 50px;height: 50px;line-height: 42px;font-size: 30px;background-color: #fff;border: 4px solid #222;text-align: center;cursor: default;}
    .example--icon:last-child{border-radius: 0 4px 4px 0;}
    @media (max-width: 768px){
      .screen--full{display: block;}
      .screen--tools{position: relative;width: 100%;right: auto;top: auto;padding: 10px;text-align: right;}
      .screen--logo{max-width: 230px;}
      .screen--subtitle{margin-top: 20px;}
      .example--item{background-color: #222;border-radius: 3px;flex-wrap: wrap;text-align: center;justify-content: center;}
      .example--text{width: 100%;background-color: transparent;border-color: transparent;}
      .page{padding: 20px;}
      .page code{overflow: auto;padding: 20px 10px;}
      .page--label{text-align: left;width: 100%;}
      .page--field{width: 100%;}
    }
  </style>
</head>
<body>  
  <div class="screen--full">
    <div class="screen--tools">
      <div class="wrap-social">
        <a href="https://github.com/figuarnieri/tipfy/archive/master.zip" class="screen--btn screen--btn-download" target="_blank" aria-label="Download button">Download</a>
        <a href="https://github.com/figuarnieri/tipfy" class="screen--btn screen--btn-github" target="_blank" aria-label="Button to repository on GitHub.com">GitHub</a>
      </div>
    </div>
    <div class="screen--content">
      <svg id="screen--logo" class="screen--logo" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 311.9 235.6">
        <path class="st0" d="M8.5,0h294.9c4.7,0,8.5,3.8,8.5,8.5v61.3C272.2,83.1,221.6,91,166.5,91C102.6,91,44.8,80.3,2.9,63 c-1-0.4-2-0.8-2.9-1.2V8.5C0,3.8,3.8,0,8.5,0L8.5,0z M130.2,181.1l54.6,54.6v-54.6h118.7c4.7,0,8.5-3.8,8.5-8.5V72.8 c-39.9,13.2-90.4,21-145.4,21c-64.3,0-122.5-10.8-164.7-28.2c-0.6-0.3-1.2-0.5-1.9-0.8v107.7c0,4.7,3.8,8.5,8.5,8.5H130.2z"/>
        <polygon class="st1 letter-1" points="92.2,122.1 79.5,122.1 79.5,165.7 58.9,165.7 58.9,122.1 45.5,122.1 46.4,105.8 93.3,105.8"/>
        <rect class="st1 letter-2" x="96.8" y="105.8" width="20.4" height="59.9"/>
        <path class="st1 letter-3" d="M149.9,147h-4.1v18.7h-20.3v-59.9h23.4c7.9,0,13.7,1.6,17.3,4.8c3.6,3.2,5.4,8.5,5.4,15.9 c0,7.4-1.8,12.6-5.2,15.8C162.8,145.4,157.3,147,149.9,147L149.9,147z"/>
        <polygon class="st1 letter-4" points="214.3,121.7 196.8,121.7 196.8,129.9 210.1,129.9 210.1,143.8 196.8,143.8 196.8,165.7 176.1,165.7 176.1,105.8 215.7,105.8"/>
        <polygon class="st1 letter-5" points="266.4,105.8 250.6,146.7 250.6,165.7 230,165.7 230,146.6 214.7,105.8 236.4,105.8 240.7,127.8 241.2,127.8 245.3,105.8"/>
        <path class="st1" d="M88.9,30.4c6.7,0,12.1,5.4,12.1,12.1c0,6.7-5.4,12.1-12.1,12.1s-12.1-5.4-12.1-12.1C76.8,35.8,82.3,30.4,88.9,30.4L88.9,30.4z">
          <animate attributeName="d" dur="5s" repeatCount="indefinite" values="M88.9,30.4c6.7,0,12.1,5.4,12.1,12.1c0,6.7-5.4,12.1-12.1,12.1s-12.1-5.4-12.1-12.1 C76.8,35.8,82.3,30.4,88.9,30.4L88.9,30.4z;M100.2,38.3H77.6c-0.5,1.3-0.8,2.7-0.8,4.2c0,1.2,0.2,2.5,0.5,3.6h23.1c0.4-1.1,0.5-2.3,0.5-3.6C101,41,100.7,39.6,100.2,38.3z;M88.9,30.4c6.7,0,12.1,5.4,12.1,12.1c0,6.7-5.4,12.1-12.1,12.1s-12.1-5.4-12.1-12.1 C76.8,35.8,82.3,30.4,88.9,30.4L88.9,30.4z;M100.2,38.3H77.6c-0.5,1.3-0.8,2.7-0.8,4.2c0,1.2,0.2,2.5,0.5,3.6h23.1c0.4-1.1,0.5-2.3,0.5-3.6C101,41,100.7,39.6,100.2,38.3z;M88.9,30.4c6.7,0,12.1,5.4,12.1,12.1c0,6.7-5.4,12.1-12.1,12.1s-12.1-5.4-12.1-12.1 C76.8,35.8,82.3,30.4,88.9,30.4L88.9,30.4z;M88.9,30.4c6.7,0,12.1,5.4,12.1,12.1c0,6.7-5.4,12.1-12.1,12.1s-12.1-5.4-12.1-12.1 C76.8,35.8,82.3,30.4,88.9,30.4L88.9,30.4z;" keyTimes="0; 0.02; 0.05; 0.07; 0.09 ;1" />
        </path>
        <path class="st1" d="M223,30.4c6.7,0,12,5.4,12,12.1c0,6.7-5.4,12.1-12,12.1c-6.7,0-12.1-5.4-12.1-12.1 C210.9,35.8,216.3,30.4,223,30.4L223,30.4z">
          <animate attributeName="d" dur="5s" repeatCount="indefinite" values="M223,30.4c6.7,0,12,5.4,12,12.1c0,6.7-5.4,12.1-12,12.1c-6.7,0-12.1-5.4-12.1-12.1 C210.9,35.8,216.3,30.4,223,30.4L223,30.4z;M234.4,38.3h-22.8c-0.4,1.2-0.6,2.5-0.6,3.9c0,1.4,0.2,2.7,0.6,3.9h22.8c0.4-1.2,0.6-2.5,0.6-3.9 C235,40.9,234.8,39.6,234.4,38.3z;M223,30.4c6.7,0,12,5.4,12,12.1c0,6.7-5.4,12.1-12,12.1c-6.7,0-12.1-5.4-12.1-12.1 C210.9,35.8,216.3,30.4,223,30.4L223,30.4z;M234.4,38.3h-22.8c-0.4,1.2-0.6,2.5-0.6,3.9c0,1.4,0.2,2.7,0.6,3.9h22.8c0.4-1.2,0.6-2.5,0.6-3.9 C235,40.9,234.8,39.6,234.4,38.3z;M223,30.4c6.7,0,12,5.4,12,12.1c0,6.7-5.4,12.1-12,12.1c-6.7,0-12.1-5.4-12.1-12.1 C210.9,35.8,216.3,30.4,223,30.4L223,30.4z;M223,30.4c6.7,0,12,5.4,12,12.1c0,6.7-5.4,12.1-12,12.1c-6.7,0-12.1-5.4-12.1-12.1 C210.9,35.8,216.3,30.4,223,30.4L223,30.4z;" keyTimes="0; 0.02; 0.05; 0.07; 0.09 ;1" />
        </path>
      </svg>
      <div class="screen--subtitle">Tooltip with ES 6, Simple Custom and <span class="screen--subtitle-strong">Only 4kb <sup class="screen--info" data-tipfy="4kb = CSS + JS">*</sup></span></div>
    </div>
  </div>
  <div class="page">
    <h1 class="page--bigtitle">Tipfy - Simple Tooltip ES 6</h1>
    <p>A Javascript library ES6, without a dependency of jQuery, Zepto, and etc... Very simple to install and use. With only 4kb code (JS + CSS)</p>
    <section>
      <h2 class="page--title">Install / Usage</h2>
      <div class="page--contain">
        <h3 class="page--subtitle">Javascript</h3>
        <p>You can add Tipfy script in 3 ways: "<strong>CDN (ES6)</strong>, <strong>ES5 script</strong> and <strong>Local Script</strong>"</p>
        <h4 class="page--minititle">CDN script</h4>
        <code><span data-clipboard>&lt;<span class="page--tag">script</span> <span class="page--attr">src</span>=<span class="page--value">"https://cdn.rawgit.com/figuarnieri/tipfy/master/js/tipfy.min.js"</span>&gt;&lt;/<span class="page--tag">script</span>&gt;</span></code>
        <h4 class="page--minititle">ES5 script</h4>
        <code><span data-clipboard>&lt;<span class="page--tag">script</span> <span class="page--attr">src</span>=<span class="page--value">"path/js/tipfy.es5.min.js"</span>&gt;&lt;/<span class="page--tag">script</span>&gt;</span></code>
        <h4 class="page--minititle">Local script</h4>
        <code><span data-clipboard>&lt;<span class="page--tag">script</span> <span class="page--attr">src</span>=<span class="page--value">"path/js/tipfy.min.js"</span>&gt;&lt;/<span class="page--tag">script</span>&gt;</code>
      </div>
      <div class="page--contain">
        <h3 class="page--subtitle">Stylesheet</h3>
        <p>You can add Tipfy stylesheet in 2 ways: "<strong>CDN <small>(Only Chrome and Firefox)</small></strong> and <strong>Local CSS <small>(by scss)</small></strong>"</strong></p>
        <h4 class="page--minititle">CDN style <small class="page--minititle-small">(Only Chrome and Firefox)</small></h4>
        <code><span data-clipboard>&lt;<span class="page--tag">link</span> <span class="page--attr">rel</span>=<span class="page--value">"stylesheet"</span> <span class="page--attr">href</span>=<span class="page--value">"https://cdn.rawgit.com/figuarnieri/tipfy/master/css/tipfy.raw.min.css"</span>&gt;</span></code>
        <h4 class="page--minititle">Local style <small class="page--minititle-small">(by scss)</small></h4>
        <code><span data-clipboard>&lt;<span class="page--tag">link</span> <span class="page--attr">rel</span>=<span class="page--value">"stylesheet"</span> <span class="page--attr">href</span>=<span class="page--value">"path/css/tipfy.min.css"</span>&gt;</span></code>
      </div>
      <div class="page--contain">
        <h3 class="page--subtitle">Instance Selector</h3>
        <p>You can instantiate Tipfy through standard CSS selectors</p>
        <h4 class="page--minititle">Selector by attribute</h4>
        <code>&lt;<span class="page--tag">i</span> <span class="page--attr">class</span>=<span class="page--value">"fa fa-user"</span> <span class="page--important">data-tipfy="User Settings"</span> <span class="page--attr">aria-hidden</span>=<span class="page--value">"true"</span> <span class="page--attr">aria-label</span>=<span class="page--value">"User Settings"</span>&gt;&lt;/<span class="page--tag">i</span>&gt;

&lt;<span class="page--tag">script</span>&gt;
  <span class="page--tag">new</span> <span class="page--value">Tipfy('</span><span class="page--important">[data-tipfy]</span><span class="page--value">')</span>;
&lt;/<span class="page--tag">script</span>&gt;</code>
        <h4 class="page--minititle">Selector by className</h4>
        <code>&lt;<span class="page--tag">i</span> <span class="page--attr">class</span>=<span class="page--value">"fa fa-user</span> <span class="page--important">tooltip-by-class</span><span class="page--value">"</span> <span class="page--attr">aria-hidden</span>=<span class="page--value">"true"</span> <span class="page--attr">aria-label</span>=<span class="page--value">"User Settings"</span>&gt;&lt;/<span class="page--tag">i</span>&gt;

&lt;<span class="page--tag">script</span>&gt;
  <span class="page--tag">new</span> <span class="page--value">Tipfy('</span><span class="page--important">.tooltip-by-class</span><span class="page--value">')</span>;
&lt;/<span class="page--tag">script</span>&gt;</code>
        <h4 class="page--minititle">Selector by className and attribute</h4>
        <code>&lt;<span class="page--tag">span</span> <span class="page--attr">class</span>=<span class="page--value">"</span><span class="page--important">section</span><span class="page--value">"</span>&gt;
  &lt;<span class="page--tag">i</span> <span class="page--attr">class</span>=<span class="page--value">"fa fa-user"</span> <span class="page--important">title="User Settings"</span> <span class="page--attr">aria-hidden</span>=<span class="page--value">"true"</span> <span class="page--attr">aria-label</span>=<span class="page--value">"User Settings"</span>&gt;&lt;/<span class="page--tag">i</span>&gt;
&lt;/<span class="page--tag">span</span>&gt;

&lt;<span class="page--tag">script</span>&gt;
  <span class="page--tag">new</span> <span class="page--value">Tipfy('</span><span class="page--important">.section [title]</span><span class="page--value">')</span>;
&lt;/<span class="page--tag">script</span>&gt;</code>
      </div>
    </section>
    <section class="page--contain">
      <h2 class="page--subtitle">Examples</h2>
      <div class="example">
        <div class="example--item">
          <span class="example--text">The Simple Tooltip</span>
          <span class="example--icon" data-tipfy="The Simple Tooltip">&#x1f4ac;</span>
        </div>
        <div class="example--item">
          <span class="example--text">Support HTML</span>
          <span class="example--icon" data-tipfy="<b style='font-size: 16px;'>Bold</b>, <i>Italic</i>, <del>Strikethrough</del> and etc...">&#x1f310;</span>
        </div>
        <div class="example--item">
          <span class="example--text">Directions Tooltip</span>
          <span class="example--icon" data-tipfy="Tooltip Top" data-tipfy-side="top">&#x1f446;</span>
          <span class="example--icon" data-tipfy="Tooltip Bottom" data-tipfy-side="bottom">&#x1f447;</span>
          <span class="example--icon" data-tipfy="Tooltip Left" data-tipfy-side="left">&#x1f448;</span>
          <span class="example--icon" data-tipfy="Tooltip Right" data-tipfy-side="right">&#x1f449;</span>
        </div>
        <div class="example--item" data-tipfy-class="class--custom">
          <span class="example--text">Add your custom class</span>
          <span class="example--icon" data-tipfy="Add class: .class--custom" data-tipfy-class="class--custom">&#x1f60d;</span>
        </div>
        <div class="example--item">
          <span class="example--text">Get HTML Element <small class="example--text-small">(.screen--logo)</small></span>
          <span class="example--icon" data-tipfy=".screen--logo" data-tipfy-side="right" data-tipfy-class="class--custom">&#x1f4af;</span>
        </div>
        <div class="example--item">
          <span class="example--text">Raw Text <small class="example--text-small">(.screen--logo)</small></span>
          <span class="example--icon" data-tipfy=".screen--logo" data-tipfy-text="">&#x1f5ff;</span>
        </div>
      </div>
    </section>
    <section class="page--contain">
      <h2 class="page--subtitle">Data attributes  <small class="page--minititle-small">[data-*]</small></h2>
      <p>If necessary, you could add attributes in the tag, to configure your tooltips options</p>
      <h3 class="page--minititle">data-tipfy</h3>
      <p>Attribute to add text in your tooltip or HTML Element</p>
      <code data-clipboard="data">&lt;<span class="page--tag">i</span> <span class="page--important">data-tipfy="Simple Text"</span>&gt;&lt;/<span class="page--tag">i</span>&gt;</code>
      <code data-clipboard="data">&lt;<span class="page--tag">i</span> <span class="page--important">data-tipfy=".select-class"</span>&gt;&lt;/<span class="page--tag">i</span>&gt;</code>
      <h3 class="page--minititle">data-tipfy-side</h3>
      <p>Attribute to add direction side in your tooltip</p>
      <ul class="page--list">
        <li>[data-tipfy-side="top"] <span class="page--default">(default)</span></li>
        <li>[data-tipfy-side="bottom"]</li>
        <li>[data-tipfy-side="right"]</li>
        <li>[data-tipfy-side="left"]</li>
      </ul>
      <code data-clipboard="data">&lt;<span class="page--tag">i</span> <span class="page--attr">data-tipfy</span>=<span class="page--value">"Simple Text"</span> <span class="page--important">data-tipfy-side="right"</span>&gt;&lt;/<span class="page--tag">i</span>&gt;</code>
      <h3 class="page--minititle">data-tipfy-class</h3>
      <p>Attribute to add one or more custom class</p>
      <code data-clipboard="data">&lt;<span class="page--tag">i</span> <span class="page--attr">data-tipfy</span>=<span class="page--value">"Simple Text"</span> <span class="page--important">data-tipfy-class="select-class-custom"</span>&gt;&lt;/<span class="page--tag">i</span>&gt;</code>
      <h3 class="page--minititle">data-tipfy-text</h3>
      <p>Add data-tipfy-text attribute to get raw text, if your tooltip text is a selector css</p>
      <code data-clipboard="data">&lt;<span class="page--tag">i</span> <span class="page--attr">data-tipfy</span>=<span class="page--value">".select-class"</span> <span class="page--important">data-tipfy-text=""</span>&gt;&lt;/<span class="page--tag">i</span>&gt;</code>
    </section>
    <section class="page--contain">
      <h2 class="page--subtitle">Source</h2>
      <p>
        <a href="https://github.com/figuarnieri/tipfy" target="_blank">Github</a> | <a href="https://twitter.com/figuarnieri" target="_blank">@figuarnieri</a>
      </p>
    </section>
    <section class="page--contain">
      <h2 class="page--subtitle">License</h2>
      <p>
        The MIT License<br>
        Copyright 2018 <sup>&copy;</sup> <a href="https://figuarnieri.github.io/" target="_blank">Filipe Guarnieri</a>
      </p>
    </section>
  </div>

  <script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v1.7.1/dist/clipboard.min.js"></script>
  <script>const clipcode=new Clipboard('[data-clipboard]',{target:(e)=>{e.setAttribute('data-clipboard-copy','');return document.querySelector(e.dataset.clipboard==='data'?'[data-clipboard-copy] .page--important':'[data-clipboard-copy]')}});clipcode.on('success',(e)=>{e.trigger.removeAttribute('data-clipboard-copy');});if(window.innerWidth < 1024)(document.querySelectorAll('.example--icon')[7].removeAttribute('data-tipfy-side'),document.querySelector('.screen--info').setAttribute('data-tipfy-side','left'));</script>

  <script src="js/tipfy.min.js"></script>
  <script>
    new Tipfy('[data-tipfy]');
  </script>
</body>
</html>