https://introjs.com/_next/static/chunks/pages/docs/tour/attributes-51279e7518c99a10.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[247],{88955:function(t,e,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/tour/attributes",function(){return o(69580)}])},69580:function(t,e,o){"use strict";o.r(e),o.d(e,{__toc:function(){return d}});var i=o(85893),r=o(45167),n=o(54294),s=o(59004);o(84759);var a=o(82643);let d=[{depth:3,value:"data-intro",id:"data-intro"},{depth:3,value:"data-title",id:"data-title"},{depth:3,value:"data-step",id:"data-step"},{depth:3,value:"data-tooltip-class",id:"data-tooltip-class"},{depth:3,value:"data-highlight-class",id:"data-highlight-class"},{depth:3,value:"data-position",id:"data-position"},{depth:3,value:"data-scroll-to",id:"data-scroll-to"},{depth:3,value:"data-disable-interaction",id:"data-disable-interaction"}];function l(t){let e=Object.assign({h1:"h1",p:"p",h3:"h3",code:"code",em:"em"},(0,a.a)(),t.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{children:"Tour HTML Attributes"}),"\n",(0,i.jsx)(e.p,{children:"You can use these HTML attributes to manage or alter intro elements."}),"\n",(0,i.jsx)(e.h3,{id:"data-intro",children:(0,i.jsx)(e.code,{children:"data-intro"})}),"\n",(0,i.jsx)(e.p,{children:"The tooltip text"}),"\n",(0,i.jsx)(e.h3,{id:"data-title",children:(0,i.jsx)(e.code,{children:"data-title"})}),"\n",(0,i.jsxs)(e.p,{children:["The tooltip title ",(0,i.jsx)(e.em,{children:"(optional)"})]}),"\n",(0,i.jsx)(e.h3,{id:"data-step",children:(0,i.jsx)(e.code,{children:"data-step"})}),"\n",(0,i.jsxs)(e.p,{children:["Define the number (priority) of step ",(0,i.jsx)(e.em,{children:"(optional)"})]}),"\n",(0,i.jsx)(e.h3,{id:"data-tooltip-class",children:(0,i.jsx)(e.code,{children:"data-tooltip-class"})}),"\n",(0,i.jsxs)(e.p,{children:["Define a CSS class for the tooltip ",(0,i.jsx)(e.em,{children:"(optional)"})]}),"\n",(0,i.jsx)(e.h3,{id:"data-highlight-class",children:(0,i.jsx)(e.code,{children:"data-highlight-class"})}),"\n",(0,i.jsxs)(e.p,{children:["Append a CSS class to the helperLayer ",(0,i.jsx)(e.em,{children:"(optional)"})]}),"\n",(0,i.jsx)(e.h3,{id:"data-position",children:(0,i.jsx)(e.code,{children:"data-position"})}),"\n",(0,i.jsxs)(e.p,{children:["Define the position of tooltip, ",(0,i.jsx)(e.code,{children:"top"}),", ",(0,i.jsx)(e.code,{children:"left"}),", ",(0,i.jsx)(e.code,{children:"right"}),", ",(0,i.jsx)(e.code,{children:"bottom"}),", ",(0,i.jsx)(e.code,{children:"bottom-left-aligned"})," (same as ",(0,i.jsx)(e.code,{children:"bottom"}),"), ",(0,i.jsx)(e.code,{children:"bottom-middle-aligned"}),", ",(0,i.jsx)(e.code,{children:"bottom-right-aligned"})," or ",(0,i.jsx)(e.code,{children:"auto"})," (to detect the position of element and assign the correct position automatically). Default is ",(0,i.jsx)(e.code,{children:"bottom"})," ",(0,i.jsx)(e.em,{children:"(optional)"})]}),"\n",(0,i.jsx)(e.h3,{id:"data-scroll-to",children:(0,i.jsx)(e.code,{children:"data-scroll-to"})}),"\n",(0,i.jsxs)(e.p,{children:["Define the element to scroll to, ",(0,i.jsx)(e.code,{children:"element"})," or ",(0,i.jsx)(e.code,{children:"tooltip"}),". Default is ",(0,i.jsx)(e.code,{children:"element"})," ",(0,i.jsx)(e.em,{children:"(optional)"})]}),"\n",(0,i.jsx)(e.h3,{id:"data-disable-interaction",children:(0,i.jsx)(e.code,{children:"data-disable-interaction"})}),"\n",(0,i.jsxs)(e.p,{children:["To disable interactions with elements inside the highlighted box, ",(0,i.jsx)(e.code,{children:"true"})," or ",(0,i.jsx)(e.code,{children:"false"})," (also ",(0,i.jsx)(e.code,{children:"1"})," or ",(0,i.jsx)(e.code,{children:"0"}),") ",(0,i.jsx)(e.em,{children:"(optional)"})]})]})}let c={MDXContent:function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,a.a)(),t.components);return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(l,{...t})}):l(t)},pageOpts:{filePath:"pages/docs/tour/attributes.md",route:"/docs/tour/attributes",frontMatter:{title:"Tour HTML Attributes",description:"HTML attributes for managing tour elements in Intro.js"},timestamp:1784724577e3,pageMap:[{kind:"Meta",data:{homepage:{type:"page",title:"Homepage",href:"/"},docs:{type:"page",title:"Docs",href:"/docs",display:"hidden"},"/docs/getting-started/start":{type:"page",title:"Quick Start",href:"/docs/getting-started/start"},"docs/support":{type:"page",title:"Support",href:"/docs/support"},blog:{type:"page",title:"Blog",href:"/blog"}}},{kind:"Folder",name:"docs",route:"/docs",children:[{kind:"Meta",data:{index:"Introduction","getting-started":"Getting Started",tour:"Tour",hints:"Hints",themes:"Themes",wrappers:"Wrappers",developers:"Developers",migration:"Migration","-- More":{type:"separator",title:"More"},API:{title:"API",href:"/docs/api",newWindow:!0},community:"Community",support:"Support"}},{kind:"MdxPage",name:"community",route:"/docs/community",frontMatter:{title:"Community",description:"Get help from the community"}},{kind:"Folder",name:"developers",route:"/docs/developers",children:[{kind:"MdxPage",name:"build",route:"/docs/developers/build",frontMatter:{title:"Build Intro.js",description:"Build Intro.js from source code"}},{kind:"MdxPage",name:"changelog",route:"/docs/developers/changelog",frontMatter:{title:"Intro.js Changelog",description:"Intro.js Changelog"}},{kind:"Meta",data:{build:"Build Intro.js",changelog:"Intro.js Changelog"}}]},{kind:"Folder",name:"getting-started",route:"/docs/getting-started",children:[{kind:"Meta",data:{install:"Install Intro.js",start:"Quick Start",license:"License"}},{kind:"MdxPage",name:"install",route:"/docs/getting-started/install",frontMatter:{title:"Install Intro.js",description:"How to install Intro.js and get started"}},{kind:"MdxPage",name:"license",route:"/docs/getting-started/license",frontMatter:{title:"License",description:"Intro.js commercial and open-source License"}},{kind:"MdxPage",name:"start",route:"/docs/getting-started/start",frontMatter:{id:"start",title:"Quick Start",description:"A simple way to add a basic tours and hints to your page"}}]},{kind:"Folder",name:"hints",route:"/docs/hints",children:[{kind:"Meta",data:{examples:"Examples",api:{type:"page",title:"Hints API",href:"/docs/api/classes/packages_hint_hint.Hint.html",newWindow:!0},attributes:{type:"page",title:"Hints HTML Attributes",href:"/docs/api/modules/packages_hint_dataAttributes.html",newWindow:!0},options:{type:"page",title:"Hints Options",href:"/docs/api/interfaces/packages_hint_option.HintOptions.html",newWindow:!0}}},{kind:"MdxPage",name:"api",route:"/docs/hints/api",frontMatter:{title:"Hint API",description:"API documentation for the hint feature in Intro.js"}},{kind:"MdxPage",name:"attributes",route:"/docs/hints/attributes",frontMatter:{title:"Hints HTML Attributes",description:"HTML attributes for managing hint elements in Intro.js"}},{kind:"Folder",name:"examples",route:"/docs/hints/examples",children:[{kind:"MdxPage",name:"hello-world",route:"/docs/hints/examples/hello-world",frontMatter:{title:"Hints Hello World",description:"Add hints to your page using HTML attributes",keywords:["javascript","tour","guide"]}},{kind:"Meta",data:{"hello-world":"Hints Hello World"}}]},{kind:"MdxPage",name:"options",route:"/docs/hints/options",frontMatter:{title:"Hints options",description:"Options for managing hint elements in Intro.js"}}]},{kind:"MdxPage",name:"index",route:"/docs",frontMatter:{title:"Intro.js Documentation",description:"Intro.js is a lightweight library for creating step-by-step introductions for your products.",slug:"/"}},{kind:"Folder",name:"migration",route:"/docs/migration",children:[{kind:"MdxPage",name:"introjs-v8-migration",route:"/docs/migration/introjs-v8-migration",frontMatter:{title:"Migration Guide",description:"Migration Guide Intro.js v8"}},{kind:"Meta",data:{"introjs-v8-migration":"Migration Guide"}}]},{kind:"MdxPage",name:"support",route:"/docs/support",frontMatter:{title:"Support",description:"Get support for Intro.js"}},{kind:"Folder",name:"themes",route:"/docs/themes",children:[{kind:"MdxPage",name:"install",route:"/docs/themes/install",frontMatter:{title:"Install themes",description:"How to install themes in IntroJS"}},{kind:"MdxPage",name:"list",route:"/docs/themes/list",frontMatter:{title:"Intro.js Themes",description:"A list of awesome custom templates available for Intro.js"}},{kind:"Meta",data:{install:"Install themes",list:"Intro.js Themes"}}]},{kind:"Folder",name:"tour",route:"/docs/tour",children:[{kind:"Meta",data:{examples:"Examples",api:{title:"Tour API",href:"/docs/api/classes/packages_tour_tour.Tour.html",type:"page",newWindow:!0},attributes:{title:"Tour HTML Attributes",href:"/docs/api/modules/packages_tour_dataAttributes.html",type:"page",newWindow:!0},options:{title:"Tour Options",href:"/docs/api/interfaces/packages_tour_option.TourOptions.html",type:"page",newWindow:!0}}},{kind:"MdxPage",name:"api",route:"/docs/tour/api",frontMatter:{title:"Tour API",description:"API documentation for the tour feature in Intro.js"}},{kind:"MdxPage",name:"attributes",route:"/docs/tour/attributes",frontMatter:{title:"Tour HTML Attributes",description:"HTML attributes for managing tour elements in Intro.js"}},{kind:"Folder",name:"examples",route:"/docs/tour/examples",children:[{kind:"MdxPage",name:"async-await",route:"/docs/tour/examples/async-await",frontMatter:{title:"Async/Await callbacks",de

1scription:"Using async/await callbacks in Intro.js",keywords:["javascript","tour","guide","async","await","promise"]}},{kind:"MdxPage",name:"confirm-before-exit",route:"/docs/tour/examples/confirm-before-exit",frontMatter:{title:"Confirm before exit",description:"Get a confirmation before closing the tour",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"css-class",route:"/docs/tour/examples/css-class",frontMatter:{title:"CSS ClassName",description:"Customize your product tour using the `tooltipClass` option",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"disable-interaction",route:"/docs/tour/examples/disable-interaction",frontMatter:{title:"Disable element interaction",description:"Disable interactions with elements inside the highlighted box",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"dont-show-again",route:"/docs/tour/examples/dont-show-again",frontMatter:{title:"Don't Show Again",description:'Display the "Don\'t Show Again" checkbox in your product tour',keywords:["javascript","tour","guide","dont-show-again"]}},{kind:"MdxPage",name:"floating-tooltip",route:"/docs/tour/examples/floating-tooltip",frontMatter:{title:"Floating tooltip",description:"Create floating tooltips that don't highlight a specific element",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"hello-world",route:"/docs/tour/examples/hello-world",frontMatter:{title:"Tour Hello World",description:"Create your product tour using data-intro and data-title HTML attributes",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"html-tooltip",route:"/docs/tour/examples/html-tooltip",frontMatter:{title:"HTML in tooltip",description:"Use HTML tags in the tooltip content",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"json-config",route:"/docs/tour/examples/json-config",frontMatter:{title:"JSON configuration",description:"Define your tour settings using JSON",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"localization",route:"/docs/tour/examples/localization",frontMatter:{title:"Localization (i18n)",description:"Use the `language` option to localize your product tour with built-in language support",keywords:["javascript","tour","guide","localization","i18n","internationalization","language"]}},{kind:"MdxPage",name:"progress-bar",route:"/docs/tour/examples/progress-bar",frontMatter:{title:"Progress bar",description:"Show a progress bar at the top of the page",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"rtl",route:"/docs/tour/examples/rtl",frontMatter:{title:"Right-to-left tour",description:"Intro.js supports RTL by default. Simply include `introjs-rtl.css` and customize buttons.",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"scrollable-element",route:"/docs/tour/examples/scrollable-element",frontMatter:{title:"Scrollable element",description:"Highlight elements inside a scrollable element",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"svg",route:"/docs/tour/examples/svg",frontMatter:{title:"Tour for SVG elements",description:"Create a product tour using SVG elements",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"tooltip-positions",route:"/docs/tour/examples/tooltip-positions",frontMatter:{title:"Tooltip positions",description:"Define the position of the tooltip",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"without-bullets",route:"/docs/tour/examples/without-bullets",frontMatter:{title:"Tour without bullets",description:"Use the `showBullets` flag to show/hide the bullets in your product tour",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"without-buttons",route:"/docs/tour/examples/without-buttons",frontMatter:{title:"Tour without buttons",description:"Use the `showButtons` flag to show/hide all buttons in your product tour",keywords:["javascript","tour","guide"]}},{kind:"Meta",data:{"async-await":"Async/Await callbacks","confirm-before-exit":"Confirm before exit","css-class":"CSS ClassName","disable-interaction":"Disable element interaction","dont-show-again":"Don't Show Again","floating-tooltip":"Floating tooltip","html-tooltip":"HTML in tooltip","json-config":"JSON configuration",localization:"Localization (i18n)","progress-bar":"Progress bar",rtl:"Right-to-left tour","scrollable-element":"Scrollable element","tooltip-positions":"Tooltip positions",svg:"Tour for SVG elements","hello-world":"Tour Hello World","without-bullets":"Tour without bullets","without-buttons":"Tour without buttons"}}]},{kind:"MdxPage",name:"options",route:"/docs/tour/options",frontMatter:{title:"Tour options",description:"Options for managing tour elements in Intro.js"}}]},{kind:"Folder",name:"wrappers",route:"/docs/wrappers",children:[{kind:"MdxPage",name:"R",route:"/docs/wrappers/R",frontMatter:{title:"Intro.js R",description:"R wrapper for Intro.js"}},{kind:"MdxPage",name:"add",route:"/docs/wrappers/add",frontMatter:{title:"Add your Intro.js wrapper",description:"Add your Intro.js wrapper to this list"}},{kind:"MdxPage",name:"angularjs",route:"/docs/wrappers/angularjs",frontMatter:{title:"Intro.js Angular",description:"AngularJS service and directives for Intro.js"}},{kind:"MdxPage",name:"dart",route:"/docs/wrappers/dart",frontMatter:{title:"Intro.js Dart",description:"Dart wrapper for Intro.js"}},{kind:"MdxPage",name:"drupal",route:"/docs/wrappers/drupal",frontMatter:{title:"Intro.js Drupal",description:"Drupal wrapper for Intro.js"}},{kind:"MdxPage",name:"ember",route:"/docs/wrappers/ember",frontMatter:{title:"Intro.js Ember",description:"Ember wrapper for Intro.js"}},{kind:"MdxPage",name:"gwt",route:"/docs/wrappers/gwt",frontMatter:{title:"Intro.js GWT",description:"GWT wrapper on top of Intro.js"}},{kind:"MdxPage",name:"magento",route:"/docs/wrappers/magento",frontMatter:{title:"Intro.js Magento",description:"Magento wrapper for Intro.js"}},{kind:"MdxPage",name:"rails",route:"/docs/wrappers/rails",frontMatter:{title:"Intro.js Rails",description:"Rails wrapper for Intro.js"}},{kind:"MdxPage",name:"react",route:"/docs/wrappers/react",frontMatter:{title:"Intro.js React",description:"React wrapper for Intro.js"}},{kind:"MdxPage",name:"wordpress",route:"/docs/wrappers/wordpress",frontMatter:{title:"Intro.js Wordpress",description:"Wordpress wrapper for Intro.js"}},{kind:"MdxPage",name:"yii",route:"/docs/wrappers/yii",frontMatter:{title:"Intro.js Yii",description:"Yii wrapper for Intro.js"}},{kind:"MdxPage",name:"yii2",route:"/docs/wrappers/yii2",frontMatter:{title:"Intro.js Yii2",description:"Yii2 wrapper for Intro.js"}},{kind:"Meta",data:{add:"Add your Intro.js wrapper",angularjs:"Intro.js Angular",dart:"Intro.js Dart",drupal:"Intro.js Drupal",ember:"Intro.js Ember",gwt:"Intro.js GWT",magento:"Intro.js Magento",R:"Intro.js R",rails:"Intro.js Rails",react:"Intro.js React",wordpress:"Intro.js Wordpress",yii:"Intro.js Yii",yii2:"Intro.js Yii2"}}]}]}],flexsearch:{codeblocks:!0},title:"Tour HTML Attributes",headings:d},pageNextRoute:"/docs/tour/attributes",nextraLayout:n.ZP,themeConfig:s.Z};e.default=(0,r.j)(c)},59004:function(t,e,o){"use strict";var i=o(85893),r=o(11163),n=o(54294);e.Z={logo:(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("img",{src:"/img/logo.svg",width:"37px",height:"32px",style:{marginRight:"5px"}}),(0,i.jsxs)("span",{children:[(0,i.jsx)("b",{children:"Intro.js"})," documentation"]})]}),primaryHue:220,primarySaturation:65,docsRepositoryBase:"https://github.com/usablica/intro.js",editLink:{component:null},project:{link:"https://github.com/usablica/intro.js"},useNextSeoProps(){let{route:t,asPath:e}=(0,r.useRouter)(),{frontMatter:o}=(0,n.ZR)(),i=o.description||"Create step-by-step product tours, user onboarding guides easily. Intro.js is a lightweight, open-source user onboarding library. Get started for free!",s=o.title?o.title+" – Intro.js":"Intro.js",a="https://introjs.com"+e,d="/"!==t&&s?"https://introjs.com/api/og?title=".concat(s):"https://introjs.com/img/social.png";return{titleTemplate:"%s – Intro.js Docs",description:o.description,canonical:a,themeColor:"#0070f3",openGraph:{type:"website",url:a,title:s,description:i,locale:"en_US",site:"introjs.com",images:[{url:d,alt:s,type:"image/jpeg"}],siteName:"introjs.com"},twitter:{handle:"@usablica",title:s,description:i,site:"introjs.com",url:a,cardType:"summary_large_image",image:d}}},sidebar:{titleComponent(t){let{title:e,type:o}=t;return"separator"===o?(0,i.jsx)("span",{className:"cursor-default",children:e}):(0,i.jsx)(i.Fragment,{children:e})},defaultMenuCollapseLevel:1,toggleButton:!0},footer:{text:(0,i.jsxs)("span",{children:[new Date().getFullYear()," \xa9"," ",(0,i.jsx)("a",{href:"https://introjs.com",target:"_blank",children:"Intro.js"}),"."]})},toc:{backToTop:!0},head:function(){let{route:t,asPath:e}=(0,r.useRouter)(),{frontMatter:o}=(0,n.ZR)(),s=o.description||"Create step-by-step product tours, user onboarding guides easily. Intro.js is a lightweight, open-source user onboarding library. Get started for free!",a=o.title?o.title+" – Intro.js":"Intro.js",d="/"!==t&&a?"https://introjs.com/api/og?title=".concat(a):"https://introjs.com/img/social.png";return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}

1),(0,i.jsx)("meta",{httpEquiv:"Content-Language",content:"en"}),(0,i.jsx)("meta",{name:"apple-mobile-web-app-title",content:"Intro.js"}),(0,i.jsx)("link",{rel:"shortcut icon",href:"/img/favicon.ico"}),(0,i.jsx)("link",{rel:"icon",type:"image/png",href:"/img/favicon.ico"}),(0,i.jsx)("link",{rel:"apple-touch-icon",href:"/img/favicon.ico"}),(0,i.jsx)("meta",{name:"twitter:title",content:a}),(0,i.jsx)("meta",{name:"twitter:description",content:s}),(0,i.jsx)("meta",{name:"twitter:image",content:d}),(0,i.jsx)("meta",{name:"twitter:url",content:"https://introjs.com"+e}),(0,i.jsx)("script",{src:"https://cdn.jsdelivr.net/npm/[email protected]/intro.min.js",defer:!0}),(0,i.jsx)("link",{rel:"stylesheet",href:"https://cdn.jsdelivr.net/npm/[email protected]/introjs.css"})]})}}},15789:function(){}},function(t){t.O(0,[3996,5675,5098,2888,9774,179],function(){return t(t.s=88955)}),_N_E=t.O()}]);