https://cirrus-ui.com/_next/static/chunks/pages/elements/tooltips-6ba00ccf33c13afa2912.js

1_N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[45],{"B+qE":function(t,o,e){"use strict";e.r(o),e.d(o,"default",(function(){return f}));var a=e("q1tI"),i=e.n(a),n=e("8Kt/"),l=e.n(n),s=e("BFRS"),c=e("cjCq"),p=e("VlCm"),r=e("qnXf"),u=e("dtTl"),d=e("nLA4"),_=[{name:"Tooltips",anchor:"#tooltips",children:[{name:"Basics",anchor:"#basics",children:null},{name:"Directions",anchor:"#directions",children:null}]}],m=e("C/iq"),b=e("ZIZD"),v=i.a.createElement,f=Object(s.b)(v(d.a,null))((function(t){return v("main",{className:"page-layout"},v(l.a,null,v("title",null,m.j," Tooltips")),v("div",null,v("section",{className:"padtop",id:"tooltips"},v("div",{className:"content"},v(p.a,{title:"Tooltips",link:"#tooltips"}),v("div",{className:"divider"}),v("p",null,"Cirrus supports a CSS only tooltip that shows on hover in different directions."))),v("section",{className:"padtop",id:"basics"},v("div",{className:"content"},v(p.a,{title:"Basics",link:"#basics",size:"4"}),v("div",{className:"divider"}),v("p",null,"A tooltip can be added to any component you want just by sticking the ",v("code",null,"tooltip")," ","class to it. Use the ",v("code",null,"data-tooltip")," attribute to specify the tooltip content."),v("div",{className:"row"},v("div",{className:"lg:col-6"},v("div",{className:"u-center"},v("div",{className:"m-1"},v("button",{className:"btn-primary tooltip","data-tooltip":"Tooltip 1"},"Button 1")),v("div",{className:"m-1"},v("button",{className:"btn-primary tooltip","data-tooltip":"Tooltip 2"},"Button 2")),v("div",{className:"m-1"},v("button",{className:"btn-primary tooltip","data-tooltip":"Tooltip 3"},"Button 3"))),v("div",{className:"space"}),v("div",{className:"u-center"},v("label",{className:"tooltip tooltip-bottom","data-tooltip":"Hey there!"},v("input",{type:"radio"})," Hover over me"),v("label",{className:"tooltip tooltip-bottom","data-tooltip":"No more long captions for checkboxes"},v("input",{type:"checkbox"})," Tooltips are cool!"))),v("div",{className:"lg:col-6"},v(u.a,{code:'<div class="u-center">\n    <div class="m-1">\n        <button class="btn-primary tooltip" data-tooltip="Tooltip 1">Button 1</button>\n    </div>\n    <div class="m-1">\n        <button class="btn-primary tooltip" data-tooltip="Tooltip 2">Button 2</button>\n    </div>\n    <div class="m-1">\n        <button class="btn-primary tooltip" data-tooltip="Tooltip 3">Button 3</button>\n    </div>\n</div>\n<div class="space"></div>\n<div class="u-center">\n    <label class="tooltip tooltip-bottom" data-tooltip="Hey there!">\n        <input type="radio"> Hover over me</label>\n    <label class="tooltip tooltip-bottom" data-tooltip="No more long captions for checkboxes">\n        <input type="checkbox"> Tooltips are cool!</label>\n</div>',language:"htmlbars"}))))),v("section",{className:"padtop",id:"directions"},v("div",{className:"content"},v(p.a,{title:"Directions",link:"#directions",size:"4"}),v("div",{className:"divider"}),v("p",null,"Show your tooltips in different directions. The direction class follows a"," ",v("code",null,"tooltip--[direction]")," convention, where the direciton can be any of the ones listed below."),v("div",{className:"row"},v("div",{className:"lg:col-4"},v("div",{className:"button-container"},v("button",{className:"tooltip","data-tooltip":"Tooltip Top (Default)"},"Tooltip Top")),v("div",{className:"btn-container"},v("button",{className:"tooltip tooltip--top-left","data-tooltip":"Tooltip Top Left"},"Tooltip Top Left")),v("div",{className:"btn-container"},v("button",{className:"tooltip tooltip--top-right","data-tooltip":"Tooltip Top Right"},"Tooltip Top Right")),v("div",{className:"btn-container"},v("button",{className:"tooltip tooltip--bottom","data-tooltip":"Tooltip Bottom"},"Tooltip Bottom")),v("div",{className:"btn-container"},v("button",{className:"tooltip tooltip--bottom-left","data-tooltip":"Tooltip Bottom Left"},"Tooltip Bottom Left")),v("div",{className:"btn-container"},v("button",{className:"tooltip tooltip--bottom-right","data-tooltip":"Tooltip Bottom Right"},"Tooltip Bottom Right")),v("div",{className:"btn-container"},v("button",{className:"tooltip tooltip--left","data-tooltip":"Tooltip Left"},"Tooltip Left")),v("div",{className:"btn-container"},v("button",{className:"tooltip tooltip--right","data-tooltip":"Tooltip Right"},"Tooltip Right"))),v("div",{className:"lg:col-8"}

1,v(u.a,{code:'<div class="button-container">\n    <button class="tooltip" data-tooltip="Tooltip Top (Default)">Tooltip Top</button>\n</div>\n<div class="btn-container">\n    <button class="tooltip tooltip--top-left" data-tooltip="Tooltip Top Left">Tooltip Top Left</button>\n</div>\n<div class="btn-container">\n    <button class="tooltip tooltip--top-right" data-tooltip="Tooltip Top Right">Tooltip Top Right</button>\n</div>\n<div class="btn-container">\n    <button class="tooltip tooltip--bottom" data-tooltip="Tooltip Bottom">Tooltip Bottom</button>\n</div>\n<div class="btn-container">\n    <button class="tooltip tooltip--bottom-left" data-tooltip="Tooltip Bottom Left">Tooltip Bottom Left</button>\n</div>\n<div class="btn-container">\n    <button class="tooltip tooltip--bottom-right" data-tooltip="Tooltip Bottom Right">Tooltip Bottom Right</button>\n</div>\n<div class="btn-container">\n    <button class="tooltip tooltip--left" data-tooltip="Tooltip Left">Tooltip Left</button>\n</div>\n<div class="btn-container">\n    <button class="tooltip tooltip--right" data-tooltip="Tooltip Right">Tooltip Right</button>\n</div>',language:"htmlbars"}))))),v(r.a,{lookupProps:{sectionName:b.c,pageName:"Tooltips"}})),v(c.a,{entries:_}))}))},VlCm:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return Headline}));var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("q1tI"),react__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__),react_copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("P5Jw"),react_copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(react_copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1__),__jsx=react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement,Headline=function Headline(props){var _props$size,HeaderTag="h".concat(null!==(_props$size=props.size)&&void 0!==_props$size?_props$size:"1"),_useState=Object(react__WEBPACK_IMPORTED_MODULE_0__.useState)(""),currentUrl=_useState[0],setCurrentUrl=_useState[1];function getUrlWithoutAnchor(){return currentUrl.replace(/#.*$/,"")}return Object(react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((function(){setCurrentUrl(eval("window.location.href;"))}),[]),__jsx(HeaderTag,null,__jsx(react_copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1___default.a,{text:getUrlWithoutAnchor()+props.link},__jsx("a",{className:"tooltip tooltip--left mr-1","data-tooltip":"Copy",style:{cursor:"pointer"}},"#")),props.title)}},cjCq:function(t,o,e){"use strict";e.d(o,"a",(function(){return n}));var a=e("q1tI"),i=e.n(a).a.createElement,n=function(t){return Object(a.useEffect)((function(){if(document.querySelector(".toc__nav")){!function(t){var o=new IntersectionObserver((function(t){t.forEach((function(t){var o=t.target.getAttribute("id");document.querySelector('.toc__nav li a[href="#'.concat(o,'"]'))&&(t.intersectionRatio>0?document.querySelector('.toc__nav li a[href="#'.concat(o,'"]')).parentElement.classList.add("active"):document.querySelector('.toc__nav li a[href="#'.concat(o,'"]')).parentElement.classList.remove("active"))}))}));document.querySelectorAll("section[id]").forEach((function(t){o.observe(t)}))}()}})),i("nav",{className:"toc__nav"},i("span",{className:"uppercase text-gray-600 font-bold text-xs"},"Contents"),function t(o){return i("ul",null,o.map((function(o){return i("li",{key:o.name},i("a",{href:o.anchor},o.name),o.children&&t(o.children))})))}(t.entries))}},dtTl:function(t,o,e){"use strict";e.d(o,"a",(function(){return u}));var a=e("q1tI"),i=e.n(a),n=e("P5Jw"),l=e.n(n),s=e("IP2g"),c=e("uUdh"),p=e("c2c2"),r=i.a.createElement,u=function(t){var o,e,i=Object(a.useState)(!1),n=i[0],u=i[1];return r("div",{className:"codeblock-wrapper u-relative mb-2"},r(c.a,{className:"codeblock pl-2 pr-3 py-1 u-shadow-lg h-100p ".concat(null!==(o=t.classes)&&void 0!==o?o:""," ").concat(t.breakAll?"break-all":""),language:"htmlbars"===t.language?"html":t.language,style:null!==(e=t.style)&&void 0!==e?e:p.duotoneDark},t.code),r(l.a,{text:t.code,onCopy:function(){u(!0),setTimeout((function(){return u(!1)}),3e3)}},r(s.a,{className:"fa-wrapper u-absolute text-gray-200",icon:["fas",n?"clipboard-check":"clipboard"],style:{cursor:"pointer",right:"1.5rem",top:"1.2rem"}})))}},qnXf:function(t,o,e){"use strict";e.d(o,"a",(function(){return p}));var a=e("q1tI"),i=e.n(a),n=e("YFqc"),l=e.n(n),s=e("ZIZD"),c=i.a.createElement,p=function(t){if(!(t.nextLink||t.prevLink)===!t.lookupProps)throw Error("Either provide prev/next link or sidebar config map");var o=t.lookupProps?s.a.get(t.lookupProps.sectionName).lowerEntry(t.lookupProps.pageName):null,e=t.lookupProps?s.a.get(t.lookupProps.sectionName).higherEntry(t.lookupProps.pageName):null;return c("section",{className:"padtop"},c("div",{className:"content"},c("div",{className:"divider"}),c("div",{className:"pagination no-bullets"},o&&c("div",{className:"pagination-item pagination-prev"},c(l.a,{href:o[1].url},c("a",{className:"u-block"},c("p",{className:"pagination-item-subtitle"},"Prev"),c("h5",{className:"font-alt font-light m-0"},o[1].text)))),e&&c("div",{className:"pagination-item pagination-next"},c(l.a,{href:e[1].url},c("a",{className:"u-block"},c("p",{className:"pagination-item-subtitle"},"Next"),c("h5",{className:"font-alt font-light m-0"},e[1].text)))),t.prevLink&&c("div",{className:"pagination-item pagination-prev"},c(l.a,{href:t.prevLink.link},c("a",{className:"u-block"},c("p",{className:"pagination-item-subtitle"},"Prev"),c("h5",{className:"font-alt font-light m-0"},t.prevLink.name)))),t.nextLink&&c("div",{className:"pagination-item pagination-next"},c(l.a,{href:t.nextLink.link},c("a",{className:"u-block"},c("p",{className:"pagination-item-subtitle"},"Next"),c("h5",{className:"font-alt font-light m-0"},t.nextLink.name)))))))}},sMV2:function(t,o,e){(window.__NEXT_P=window.__NEXT_P||[]).push(["/elements/tooltips",function(){return e("B+qE")}])}},[["sMV2",0,2,1,3,4,5,6]]]);