picocss/docs/src/tooltips.html

<!doctype html>
<html lang="en">
  <head>
    ${require('./_head.html') 
      title=`Tooltips`
      description=`Enable tooltips everywhere in pure HTML, without JavaScript.`
      canonical=`tooltips.html`
    }
  </head>

  <body>
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
      ${require('./_sidebar.html') active=`tooltips-link`}
      
      <div role="document">
        <section id="tooltips">
          <hgroup>
            <h1>Tooltips</h1>
            <h2>Enable tooltips everywhere in pure HTML, without JavaScript.</h2>
          </hgroup>
          <article aria-label="Tooltips examples">
            <p>Tooltip on a <a href="#" onclick="event.preventDefault()" data-tooltip="Tooltip">link</a></p>
            <p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
            <p><button data-tooltip="Tooltip" aria-label="Example button">Tooltip on a button</button></p>
            <footer class="code">

<pre><code>&lt;<b>p</b>&gt;Tooltip on a &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;link&lt;/<b>a</b>&gt;&lt;/<b>p</b>&gt;
&lt;<b>p</b>&gt;Tooltip on &lt;<b>em</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;inline element&lt;/<b>em</b>&gt;&lt;/<b>p</b>&gt;
&lt;<b>p</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;Tooltip on a button&lt;/<b>button</b>&gt;&lt;/<b>p</b>&gt;
</code></pre>

            </footer>
          </article>

          <p><code><i>data-placement</i></code> with the values <code><u>top</u></code>, <code><u>right</u></code>, <code><u>bottom</u></code> or <code><u>left</u></code> is used to control the position of the tooltip.</p>

          <article aria-label="Tooltips examples">
            <div class="grid">
              <div class="top"><button data-tooltip="Top" data-placement="top">Top</button></div>
              <div class="right"><button data-tooltip="Right" data-placement="right">Right</button></div>
              <div class="bottom"><button data-tooltip="Bottom" data-placement="bottom">Bottom</button></div>
              <div class="left"><button data-tooltip="Left" data-placement="left">Left</button></div>
            </div>
            <footer class="code">

<pre><code>&lt;<b>button</b> <i>data-tooltip</i>=<u>"Top"</u> <i>data-placement</i>=<u>"top"</u>&gt;Top&lt;/<b>button</b>&gt;
&lt;<b>button</b> <i>data-tooltip</i>=<u>"Right"</u> <i>data-placement</i>=<u>"right"</u>&gt;Right&lt;/<b>button</b>&gt;
&lt;<b>button</b> <i>data-tooltip</i>=<u>"Bottom"</u> <i>data-placement</i>=<u>"bottom"</u>&gt;Bottom&lt;/<b>button</b>&gt;
&lt;<b>button</b> <i>data-tooltip</i>=<u>"Left"</u> <i>data-placement</i>=<u>"left"</u>&gt;Left&lt;/<b>button</b>&gt;
</code></pre>

            </footer>
          </article>

        </section>

        ${require('./_footer.html')}
        
      </div>
    </main>
    <script src="js/commons.min.js"></script>
  </body>
</html>
Revert "Merge branch 'master' into dev" This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3. 2021-12-19 09:50:55 +07:00			`<!doctype html>`
			`<html lang="en">`
			`<head>`
			`${require('./_head.html')`
chore: upgrade `html-includes` 2023-12-28 16:26:59 +07:00			title=`Tooltips`
			description=`Enable tooltips everywhere in pure HTML, without JavaScript.`
			canonical=`tooltips.html`
Revert "Merge branch 'master' into dev" This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3. 2021-12-19 09:50:55 +07:00			`}`
			`</head>`

			`<body>`
			`${require('./_nav.html')}`

			`<main class="container" id="docs">`
chore: upgrade `html-includes` 2023-12-28 16:26:59 +07:00			${require('./_sidebar.html') active=`tooltips-link`}
Revert "Merge branch 'master' into dev" This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3. 2021-12-19 09:50:55 +07:00
			`<div role="document">`
			`<section id="tooltips">`
			`<hgroup>`
			`<h1>Tooltips</h1>`
			`<h2>Enable tooltips everywhere in pure HTML, without JavaScript.</h2>`
			`</hgroup>`
			`<article aria-label="Tooltips examples">`
			`<p>Tooltip on a <a href="#" onclick="event.preventDefault()" data-tooltip="Tooltip">link</a></p>`
			`<p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>`
			`<p><button data-tooltip="Tooltip" aria-label="Example button">Tooltip on a button</button></p>`
			`<footer class="code">`

			`<pre><code><<b>p</b>>Tooltip on a <<b>a</b> <i>href</i>=<u>"#"</u> <i>data-tooltip</i>=<u>"Tooltip"</u>>link</<b>a</b>></<b>p</b>>`
			`<<b>p</b>>Tooltip on <<b>em</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>inline element</<b>em</b>></<b>p</b>>`
docs: add tooltips examples 2022-06-21 17:26:12 +08:00			`<<b>p</b>><<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>Tooltip on a button</<b>button</b>></<b>p</b>>`
			`</code></pre>`
Revert "Merge branch 'master' into dev" This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3. 2021-12-19 09:50:55 +07:00
			`</footer>`
			`</article>`
docs: Update tooltips 2022-09-11 14:37:31 +07:00
			`<p><code><i>data-placement</i></code> with the values <code><u>top</u></code>, <code><u>right</u></code>, <code><u>bottom</u></code> or <code><u>left</u></code> is used to control the position of the tooltip.</p>`

			`<article aria-label="Tooltips examples">`
			`<div class="grid">`
			`<div class="top"><button data-tooltip="Top" data-placement="top">Top</button></div>`
			`<div class="right"><button data-tooltip="Right" data-placement="right">Right</button></div>`
			`<div class="bottom"><button data-tooltip="Bottom" data-placement="bottom">Bottom</button></div>`
			`<div class="left"><button data-tooltip="Left" data-placement="left">Left</button></div>`
			`</div>`
			`<footer class="code">`

			`<pre><code><<b>button</b> <i>data-tooltip</i>=<u>"Top"</u> <i>data-placement</i>=<u>"top"</u>>Top</<b>button</b>>`
			`<<b>button</b> <i>data-tooltip</i>=<u>"Right"</u> <i>data-placement</i>=<u>"right"</u>>Right</<b>button</b>>`
			`<<b>button</b> <i>data-tooltip</i>=<u>"Bottom"</u> <i>data-placement</i>=<u>"bottom"</u>>Bottom</<b>button</b>>`
			`<<b>button</b> <i>data-tooltip</i>=<u>"Left"</u> <i>data-placement</i>=<u>"left"</u>>Left</<b>button</b>>`
			`</code></pre>`

			`</footer>`
			`</article>`

Revert "Merge branch 'master' into dev" This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3. 2021-12-19 09:50:55 +07:00			`</section>`

			`${require('./_footer.html')}`

			`</div>`
			`</main>`
			`<script src="js/commons.min.js"></script>`
			`</body>`
			`</html>`