2024-01-27 13:53:19 +07:00
<!DOCTYPE html>
2021-12-19 09:50:55 +07:00
< html lang = "en" >
< head >
2024-01-27 13:53:19 +07:00
${require('./_head.html') title=`Tooltips` description=`Enable tooltips
everywhere in pure HTML, without JavaScript.` canonical=`tooltips.html` }
2021-12-19 09:50:55 +07:00
< / head >
< body >
${require('./_nav.html')}
2024-01-27 13:53:19 +07:00
2021-12-19 09:50:55 +07:00
< main class = "container" id = "docs" >
2023-12-28 16:26:59 +07:00
${require('./_sidebar.html') active=`tooltips-link`}
2024-01-27 13:53:19 +07:00
2021-12-19 09:50:55 +07:00
< div role = "document" >
< section id = "tooltips" >
< hgroup >
< h1 > Tooltips< / h1 >
2024-01-27 13:53:19 +07:00
< h2 >
Enable tooltips everywhere in pure HTML, without JavaScript.
< / h2 >
2021-12-19 09:50:55 +07:00
< / hgroup >
< article aria-label = "Tooltips examples" >
2024-01-27 13:53:19 +07:00
< p >
Tooltip on a
< a
href="#"
onclick="event.preventDefault()"
data-tooltip="Tooltip"
>link< /a
>
< / p >
2021-12-19 09:50:55 +07:00
< p > Tooltip on < em data-tooltip = "Tooltip" > inline element< / em > < / p >
2024-01-27 13:53:19 +07:00
< p >
< button data-tooltip = "Tooltip" aria-label = "Example button" >
Tooltip on a button
< / button >
< / p >
2021-12-19 09:50:55 +07:00
< footer class = "code" >
2024-01-27 13:53:19 +07:00
< 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 > >
2021-12-19 09:50:55 +07:00
< < b > p< / b > > Tooltip on < < b > em< / b > < i > data-tooltip< / i > =< u > "Tooltip"< / u > > inline element< /< b > em< / b > > < /< b > p< / b > >
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 >
2021-12-19 09:50:55 +07:00
< / footer >
< / article >
2022-09-11 14:37:31 +07:00
2024-01-27 13:53:19 +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 >
2022-09-11 14:37:31 +07:00
< article aria-label = "Tooltips examples" >
< div class = "grid" >
2024-01-27 13:53:19 +07:00
< 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 >
2022-09-11 14:37:31 +07:00
< / div >
< footer class = "code" >
2024-01-27 13:53:19 +07:00
< pre > < code > < < b > button< / b > < i > data-tooltip< / i > =< u > "Top"< / u > < i > data-placement< / i > =< u > "top"< / u > > Top< /< b > button< / b > >
2022-09-11 14:37:31 +07:00
< < 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 >
2021-12-19 09:50:55 +07:00
< / section >
${require('./_footer.html')}
< / div >
< / main >
< script src = "js/commons.min.js" > < / script >
< / body >
< / html >
