| 1 | <!doctype html>
|
| 2 | <html lang="en">
|
| 3 | <head>
|
| 4 | ${require('./_head.html')
|
| 5 | title="Tooltips"
|
| 6 | description="Enable tooltips everywhere in pure HTML, without JavaScript."
|
| 7 | canonical="tooltips.html"
|
| 8 | }
|
| 9 | </head>
|
| 10 |
|
| 11 | <body>
|
| 12 | ${require('./_nav.html')}
|
| 13 |
|
| 14 | <main class="container" id="docs">
|
| 15 | ${require('./_sidebar.html') active="tooltips-link"}
|
| 16 |
|
| 17 | <div role="document">
|
| 18 | <section id="tooltips">
|
| 19 | <hgroup>
|
| 20 | <h1>Tooltips</h1>
|
| 21 | <h2>Enable tooltips everywhere in pure HTML, without JavaScript.</h2>
|
| 22 | </hgroup>
|
| 23 | <article aria-label="Tooltips examples">
|
| 24 | <p>Tooltip on a <a href="#" onclick="event.preventDefault()" data-tooltip="Tooltip">link</a></p>
|
| 25 | <p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
|
| 26 | <p><button data-tooltip="Tooltip" aria-label="Example button">Tooltip on a button</button></p>
|
| 27 | <footer class="code">
|
| 28 |
|
| 29 | <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>>
|
| 30 | <<b>p</b>>Tooltip on <<b>em</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>inline element</<b>em</b>></<b>p</b>>
|
| 31 | <<b>p</b>><<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>Tooltip on a button</<b>button</b>></<b>p</b>>
|
| 32 | </code></pre>
|
| 33 |
|
| 34 | </footer>
|
| 35 | </article>
|
| 36 |
|
| 37 | <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>
|
| 38 |
|
| 39 | <article aria-label="Tooltips examples">
|
| 40 | <div class="grid">
|
| 41 | <div class="top"><button data-tooltip="Top" data-placement="top">Top</button></div>
|
| 42 | <div class="right"><button data-tooltip="Right" data-placement="right">Right</button></div>
|
| 43 | <div class="bottom"><button data-tooltip="Bottom" data-placement="bottom">Bottom</button></div>
|
| 44 | <div class="left"><button data-tooltip="Left" data-placement="left">Left</button></div>
|
| 45 | </div>
|
| 46 | <footer class="code">
|
| 47 |
|
| 48 | <pre><code><<b>button</b> <i>data-tooltip</i>=<u>"Top"</u> <i>data-placement</i>=<u>"top"</u>>Top</<b>button</b>>
|
| 49 | <<b>button</b> <i>data-tooltip</i>=<u>"Right"</u> <i>data-placement</i>=<u>"right"</u>>Right</<b>button</b>>
|
| 50 | <<b>button</b> <i>data-tooltip</i>=<u>"Bottom"</u> <i>data-placement</i>=<u>"bottom"</u>>Bottom</<b>button</b>>
|
| 51 | <<b>button</b> <i>data-tooltip</i>=<u>"Left"</u> <i>data-placement</i>=<u>"left"</u>>Left</<b>button</b>>
|
| 52 | </code></pre>
|
| 53 |
|
| 54 | </footer>
|
| 55 | </article>
|
| 56 |
|
| 57 | </section>
|
| 58 |
|
| 59 | ${require('./_footer.html')}
|
| 60 |
|
| 61 | </div>
|
| 62 | </main>
|
| 63 | <script src="js/commons.min.js"></script>
|
| 64 | </body>
|
| 65 | </html>
|