2021-12-19 09:50:55 +07:00
<!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 >
2022-06-21 17:26:12 +08:00
< p > Tooltip with < code > data-placement< / code > < / p >
< div class = "tooltip-placement" >
< div class = "top" > < button data-tooltip = "Top" data-placement = "top" aria-label = "Top tooltip" > Top tooltip< / button > < / div >
< div class = "left" > < button data-tooltip = "Left" data-placement = "left" aria-label = "Left tooltip" > Left tooltip< / button > < / div >
< div class = "right" > < button data-tooltip = "Right" data-placement = "right" aria-label = "Right tooltip" > Right tooltip< / button > < / div >
< div class = "bottom" > < button data-tooltip = "Bottom" data-placement = "bottom" aria-label = "Bottom tooltip" > Bottom tooltip< / button > < / div >
< / div >
2021-12-19 09:50:55 +07:00
< 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 > >
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 > >
< em > < -- Placement --> < / em >
< < b > div< / b > > < < b > button< / b > < i > data-tooltip< / i > =< u > "Top"< / u > < i > data-placement< / i > =< u > "top"< / u > > Top tooltip< /< b > button< / b > > < /< b > div< / b > >
< < b > div< / b > > < < b > button< / b > < i > data-tooltip< / i > =< u > "Left"< / u > < i > data-placement< / i > =< u > "left"< / u > > Left tooltip< /< b > button< / b > > < /< b > div< / b > >
< < b > div< / b > > < < b > button< / b > < i > data-tooltip< / i > =< u > "Right"< / u > < i > data-placement< / i > =< u > "right"< / u > > Right tooltip< /< b > button< / b > > < /< b > div< / b > >
< < b > div< / b > > < < b > button< / b > < i > data-tooltip< / i > =< u > "Bottom"< / u > < i > data-placement< / i > =< u > "bottom"< / u > > Bottom tooltip< /< b > button< / b > > < /< b > div< / b > >
< / code > < / pre >
2021-12-19 09:50:55 +07:00
< / footer >
< / article >
< / section >
${require('./_footer.html')}
< / div >
< / main >
< script src = "js/commons.min.js" > < / script >
< / body >
< / html >
