[{"data":1,"prerenderedAt":983},["ShallowReactive",2],{"navigation":3,"/components/image":272,"/components/image-surround":978},[4,22,59,95,120,161,183,200,243,264],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/getting-started","01.getting-started",[10,14,18],{"title":11,"path":12,"stem":13},"Introduction","/getting-started/introduction","01.getting-started/1.introduction",{"title":15,"path":16,"stem":17},"Installation","/getting-started/installation","01.getting-started/2.installation",{"title":19,"path":20,"stem":21},"Quick Start","/getting-started/quick-start","01.getting-started/3.quick-start",{"title":23,"path":24,"stem":25,"children":26,"page":6},"Configuration","/configuration","02.configuration",[27,31,35,39,43,47,51,55],{"title":28,"path":29,"stem":30},"Overview","/configuration/overview","02.configuration/1.overview",{"title":32,"path":33,"stem":34},"Size","/configuration/size","02.configuration/2.size",{"title":36,"path":37,"stem":38},"Steps","/configuration/steps","02.configuration/3.steps",{"title":40,"path":41,"stem":42},"Placement","/configuration/placement","02.configuration/4.placement",{"title":44,"path":45,"stem":46},"Animation","/configuration/animation","02.configuration/5.animation",{"title":48,"path":49,"stem":50},"Scroll","/configuration/scroll","02.configuration/6.scroll",{"title":52,"path":53,"stem":54},"Skip","/configuration/skip","02.configuration/7.skip",{"title":56,"path":57,"stem":58},"Styles","/configuration/styles","02.configuration/8.styles",{"title":60,"path":61,"stem":62,"children":63,"page":6},"Components","/components","03.components",[64,68,72,76,80,84,88,91],{"title":65,"path":66,"stem":67},"Container","/components/container","03.components/1.container",{"title":69,"path":70,"stem":71},"Overlay","/components/overlay","03.components/2.overlay",{"title":73,"path":74,"stem":75},"Tooltip","/components/tooltip","03.components/3.tooltip",{"title":77,"path":78,"stem":79},"Image","/components/image","03.components/4.image",{"title":81,"path":82,"stem":83},"Buttons","/components/buttons","03.components/5.buttons",{"title":85,"path":86,"stem":87},"Progress","/components/progress","03.components/6.progress",{"title":52,"path":89,"stem":90},"/components/skip","03.components/7.skip",{"title":92,"path":93,"stem":94},"Close Button","/components/close-button","03.components/8.close-button",{"title":96,"path":97,"stem":98,"children":99,"page":6},"Features","/features","04.features",[100,104,108,112,116],{"title":101,"path":102,"stem":103},"Visibility","/features/visibility","04.features/1.visibility",{"title":105,"path":106,"stem":107},"Responsive","/features/responsive","04.features/2.responsive",{"title":109,"path":110,"stem":111},"Keyboard","/features/keyboard","04.features/3.keyboard",{"title":113,"path":114,"stem":115},"Highlight","/features/highlight","04.features/4.highlight",{"title":117,"path":118,"stem":119},"Overrides","/features/overrides","04.features/5.overrides",{"title":121,"path":122,"stem":123,"children":124,"page":6},"API Reference","/api-reference","05.api-reference",[125,129,133,137,141,145,149,153,157],{"title":126,"path":127,"stem":128},"useBorda","/api-reference/use-borda","05.api-reference/1.use-borda",{"title":130,"path":131,"stem":132},"useConfig","/api-reference/use-config","05.api-reference/2.use-config",{"title":134,"path":135,"stem":136},"useHighlight","/api-reference/use-highlight","05.api-reference/3.use-highlight",{"title":138,"path":139,"stem":140},"Borda Instance","/api-reference/borda-instance","05.api-reference/4.borda-instance",{"title":142,"path":143,"stem":144},"Controller API","/api-reference/controller-api","05.api-reference/5.controller-api",{"title":146,"path":147,"stem":148},"Events API","/api-reference/events-api","05.api-reference/6.events-api",{"title":150,"path":151,"stem":152},"Visibility API","/api-reference/visibility-api","05.api-reference/7.visibility-api",{"title":154,"path":155,"stem":156},"Skip API","/api-reference/skip-api","05.api-reference/8.skip-api",{"title":158,"path":159,"stem":160},"Scroll API","/api-reference/scroll-api","05.api-reference/9.scroll-api",{"title":162,"path":163,"stem":164,"children":165,"page":6},"Events","/events","06.events",[166,170,174,177,180],{"title":167,"path":168,"stem":169},"Tour","/events/tour","06.events/1.tour",{"title":171,"path":172,"stem":173},"Widget","/events/widget","06.events/2.widget",{"title":52,"path":175,"stem":176},"/events/skip","06.events/3.skip",{"title":101,"path":178,"stem":179},"/events/visibility","06.events/4.visibility",{"title":109,"path":181,"stem":182},"/events/keyboard","06.events/5.keyboard",{"title":184,"path":185,"stem":186,"children":187,"page":6},"Custom Element","/custom-element","07.custom-element",[188,192,196],{"title":189,"path":190,"stem":191},"Setup","/custom-element/setup","07.custom-element/1.setup",{"title":193,"path":194,"stem":195},"Usage","/custom-element/usage","07.custom-element/2.usage",{"title":197,"path":198,"stem":199},"DOM Events","/custom-element/events","07.custom-element/3.events",{"title":201,"path":202,"stem":203,"children":204,"page":6},"Examples","/examples","08.examples",[205,209,213,217,220,223,226,229,233,236,240],{"title":206,"path":207,"stem":208},"Basic Setup","/examples/basic-setup","08.examples/01.basic-setup",{"title":210,"path":211,"stem":212},"Multi-step","/examples/multi-step","08.examples/02.multi-step",{"title":214,"path":215,"stem":216},"Custom Styling","/examples/custom-styling","08.examples/03.custom-styling",{"title":113,"path":218,"stem":219},"/examples/highlight","08.examples/04.highlight",{"title":105,"path":221,"stem":222},"/examples/responsive","08.examples/05.responsive",{"title":117,"path":224,"stem":225},"/examples/overrides","08.examples/06.overrides",{"title":109,"path":227,"stem":228},"/examples/keyboard","08.examples/07.keyboard",{"title":230,"path":231,"stem":232},"Don't Show Again","/examples/skip","08.examples/08.skip",{"title":44,"path":234,"stem":235},"/examples/animation","08.examples/09.animation",{"title":237,"path":238,"stem":239},"Transition","/examples/transition","08.examples/10.transition",{"title":85,"path":241,"stem":242},"/examples/progress","08.examples/11.progress",{"title":244,"path":245,"stem":246,"children":247,"page":6},"Distribution","/distribution","09.distribution",[248,252,256,260],{"title":249,"path":250,"stem":251},"Formats","/distribution/formats","09.distribution/1.formats",{"title":253,"path":254,"stem":255},"Browser Support","/distribution/browser-support","09.distribution/2.browser-support",{"title":257,"path":258,"stem":259},"Bundle Size","/distribution/bundle-size","09.distribution/3.bundle-size",{"title":261,"path":262,"stem":263},"TypeScript","/distribution/typescript","09.distribution/4.typescript",{"title":265,"path":266,"stem":267,"children":268,"page":6},"Accessibility","/accessibility","10.accessibility",[269],{"title":28,"path":270,"stem":271},"/accessibility/overview","10.accessibility/1.overview",{"id":273,"title":77,"body":274,"description":972,"extension":973,"links":974,"meta":975,"navigation":484,"path":78,"seo":976,"stem":79,"__hash__":977},"docs/03.components/4.image.md",{"type":275,"value":276,"toc":967},"minimark",[277,294,299,419,434,695,699,755,758,861,865,963],[278,279,280,281,285,286,289,290,293],"p",{},"The tour image renders above the tooltip heading. It supports two visual variants — ",[282,283,284],"code",{},"default"," (inset within tooltip padding) and ",[282,287,288],{},"bleed"," (stretched to tooltip edges, only top corners rounded). Pass ",[282,291,292],{},"false"," to disable.",[295,296,298],"h2",{"id":297},"config","Config",[300,301,302,321],"table",{},[303,304,305],"thead",{},[306,307,308,312,315,318],"tr",{},[309,310,311],"th",{},"Property",[309,313,314],{},"Type",[309,316,317],{},"Default",[309,319,320],{},"Description",[322,323,324,350,368,385,402],"tbody",{},[306,325,326,332,337,342],{},[327,328,329],"td",{},[282,330,331],{},"variant",[327,333,334],{},[282,335,336],{},"BordaTourImageVariant",[327,338,339],{},[282,340,341],{},"DEFAULT",[327,343,344,345,347,348],{},"Visual presentation — ",[282,346,284],{}," or ",[282,349,288],{},[306,351,352,357,362,365],{},[327,353,354],{},[282,355,356],{},"aria",[327,358,359],{},[282,360,361],{},"Partial\u003CComponentAriaProps>",[327,363,364],{},"—",[327,366,367],{},"ARIA attributes",[306,369,370,375,380,382],{},[327,371,372],{},[282,373,374],{},"customClasses",[327,376,377],{},[282,378,379],{},"Partial\u003CBordaImageCustomClasses>",[327,381,364],{},[327,383,384],{},"Custom CSS classes",[306,386,387,392,397,399],{},[327,388,389],{},[282,390,391],{},"customStyles",[327,393,394],{},[282,395,396],{},"Partial\u003CBordaImageCustomStyles>",[327,398,364],{},[327,400,401],{},"Custom inline styles",[306,403,404,409,414,416],{},[327,405,406],{},[282,407,408],{},"customHtml",[327,410,411],{},[282,412,413],{},"Partial\u003CBordaImageCustomHtml>",[327,415,364],{},[327,417,418],{},"Custom HTML that replaces the image entirely",[278,420,421,422,425,426,429,430,433],{},"The image ",[282,423,424],{},"src"," and ",[282,427,428],{},"alt"," come from each step's ",[282,431,432],{},"image"," field, not from the component config.",[435,436,441],"pre",{"className":437,"code":438,"language":439,"meta":440,"style":440},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { BordaTourImageVariant } from '@retoo/borda';\n\nawait borda.mount({\n  steps: [\n    {\n      target: '#dashboard',\n      title: 'Dashboard',\n      description: 'Your main overview.',\n      image: { src: '/tour/dashboard.png', alt: 'Dashboard overview' },\n      placement: 'bottom-center',\n    },\n  ],\n  tourImage: {\n    variant: BordaTourImageVariant.BLEED,\n  },\n});\n","ts","",[282,442,443,479,486,508,521,527,545,562,579,619,636,642,650,661,678,684],{"__ignoreMap":440},[444,445,448,452,456,460,463,466,469,473,476],"span",{"class":446,"line":447},"line",1,[444,449,451],{"class":450},"s7zQu","import",[444,453,455],{"class":454},"sMK4o"," {",[444,457,459],{"class":458},"sTEyZ"," BordaTourImageVariant",[444,461,462],{"class":454}," }",[444,464,465],{"class":450}," from",[444,467,468],{"class":454}," '",[444,470,472],{"class":471},"sfazB","@retoo/borda",[444,474,475],{"class":454},"'",[444,477,478],{"class":454},";\n",[444,480,482],{"class":446,"line":481},2,[444,483,485],{"emptyLinePlaceholder":484},true,"\n",[444,487,489,492,495,498,502,505],{"class":446,"line":488},3,[444,490,491],{"class":450},"await",[444,493,494],{"class":458}," borda",[444,496,497],{"class":454},".",[444,499,501],{"class":500},"s2Zo4","mount",[444,503,504],{"class":458},"(",[444,506,507],{"class":454},"{\n",[444,509,511,515,518],{"class":446,"line":510},4,[444,512,514],{"class":513},"swJcz","  steps",[444,516,517],{"class":454},":",[444,519,520],{"class":458}," [\n",[444,522,524],{"class":446,"line":523},5,[444,525,526],{"class":454},"    {\n",[444,528,530,533,535,537,540,542],{"class":446,"line":529},6,[444,531,532],{"class":513},"      target",[444,534,517],{"class":454},[444,536,468],{"class":454},[444,538,539],{"class":471},"#dashboard",[444,541,475],{"class":454},[444,543,544],{"class":454},",\n",[444,546,548,551,553,555,558,560],{"class":446,"line":547},7,[444,549,550],{"class":513},"      title",[444,552,517],{"class":454},[444,554,468],{"class":454},[444,556,557],{"class":471},"Dashboard",[444,559,475],{"class":454},[444,561,544],{"class":454},[444,563,565,568,570,572,575,577],{"class":446,"line":564},8,[444,566,567],{"class":513},"      description",[444,569,517],{"class":454},[444,571,468],{"class":454},[444,573,574],{"class":471},"Your main overview.",[444,576,475],{"class":454},[444,578,544],{"class":454},[444,580,582,585,587,589,592,594,596,599,601,604,607,609,611,614,616],{"class":446,"line":581},9,[444,583,584],{"class":513},"      image",[444,586,517],{"class":454},[444,588,455],{"class":454},[444,590,591],{"class":513}," src",[444,593,517],{"class":454},[444,595,468],{"class":454},[444,597,598],{"class":471},"/tour/dashboard.png",[444,600,475],{"class":454},[444,602,603],{"class":454},",",[444,605,606],{"class":513}," alt",[444,608,517],{"class":454},[444,610,468],{"class":454},[444,612,613],{"class":471},"Dashboard overview",[444,615,475],{"class":454},[444,617,618],{"class":454}," },\n",[444,620,622,625,627,629,632,634],{"class":446,"line":621},10,[444,623,624],{"class":513},"      placement",[444,626,517],{"class":454},[444,628,468],{"class":454},[444,630,631],{"class":471},"bottom-center",[444,633,475],{"class":454},[444,635,544],{"class":454},[444,637,639],{"class":446,"line":638},11,[444,640,641],{"class":454},"    },\n",[444,643,645,648],{"class":446,"line":644},12,[444,646,647],{"class":458},"  ]",[444,649,544],{"class":454},[444,651,653,656,658],{"class":446,"line":652},13,[444,654,655],{"class":513},"  tourImage",[444,657,517],{"class":454},[444,659,660],{"class":454}," {\n",[444,662,664,667,669,671,673,676],{"class":446,"line":663},14,[444,665,666],{"class":513},"    variant",[444,668,517],{"class":454},[444,670,459],{"class":458},[444,672,497],{"class":454},[444,674,675],{"class":458},"BLEED",[444,677,544],{"class":454},[444,679,681],{"class":446,"line":680},15,[444,682,683],{"class":454},"  },\n",[444,685,687,690,693],{"class":446,"line":686},16,[444,688,689],{"class":454},"}",[444,691,692],{"class":458},")",[444,694,478],{"class":454},[295,696,698],{"id":697},"disabling","Disabling",[435,700,702],{"className":437,"code":701,"language":439,"meta":440,"style":440},"await borda.mount({\n  steps: [...],\n  tourImage: false,\n});\n",[282,703,704,718,735,747],{"__ignoreMap":440},[444,705,706,708,710,712,714,716],{"class":446,"line":447},[444,707,491],{"class":450},[444,709,494],{"class":458},[444,711,497],{"class":454},[444,713,501],{"class":500},[444,715,504],{"class":458},[444,717,507],{"class":454},[444,719,720,722,724,727,730,733],{"class":446,"line":481},[444,721,514],{"class":513},[444,723,517],{"class":454},[444,725,726],{"class":458}," [",[444,728,729],{"class":454},"...",[444,731,732],{"class":458},"]",[444,734,544],{"class":454},[444,736,737,739,741,745],{"class":446,"line":488},[444,738,655],{"class":513},[444,740,517],{"class":454},[444,742,744],{"class":743},"sfNiH"," false",[444,746,544],{"class":454},[444,748,749,751,753],{"class":446,"line":510},[444,750,689],{"class":454},[444,752,692],{"class":458},[444,754,478],{"class":454},[278,756,757],{},"Per-step disable:",[435,759,761],{"className":437,"code":760,"language":439,"meta":440,"style":440},"steps: [\n  {\n    target: '#element',\n    title: 'No image here',\n    description: 'This step has no image.',\n    placement: 'bottom-center',\n    tourImage: false,\n  },\n]\n",[282,762,763,773,778,794,810,826,841,852,856],{"__ignoreMap":440},[444,764,765,769,771],{"class":446,"line":447},[444,766,768],{"class":767},"sBMFI","steps",[444,770,517],{"class":454},[444,772,520],{"class":458},[444,774,775],{"class":446,"line":481},[444,776,777],{"class":454},"  {\n",[444,779,780,783,785,787,790,792],{"class":446,"line":488},[444,781,782],{"class":513},"    target",[444,784,517],{"class":454},[444,786,468],{"class":454},[444,788,789],{"class":471},"#element",[444,791,475],{"class":454},[444,793,544],{"class":454},[444,795,796,799,801,803,806,808],{"class":446,"line":510},[444,797,798],{"class":513},"    title",[444,800,517],{"class":454},[444,802,468],{"class":454},[444,804,805],{"class":471},"No image here",[444,807,475],{"class":454},[444,809,544],{"class":454},[444,811,812,815,817,819,822,824],{"class":446,"line":523},[444,813,814],{"class":513},"    description",[444,816,517],{"class":454},[444,818,468],{"class":454},[444,820,821],{"class":471},"This step has no image.",[444,823,475],{"class":454},[444,825,544],{"class":454},[444,827,828,831,833,835,837,839],{"class":446,"line":529},[444,829,830],{"class":513},"    placement",[444,832,517],{"class":454},[444,834,468],{"class":454},[444,836,631],{"class":471},[444,838,475],{"class":454},[444,840,544],{"class":454},[444,842,843,846,848,850],{"class":446,"line":547},[444,844,845],{"class":513},"    tourImage",[444,847,517],{"class":454},[444,849,744],{"class":743},[444,851,544],{"class":454},[444,853,854],{"class":446,"line":564},[444,855,683],{"class":454},[444,857,858],{"class":446,"line":581},[444,859,860],{"class":458},"]\n",[295,862,864],{"id":863},"interface","Interface",[435,866,868],{"className":437,"code":867,"language":439,"meta":440,"style":440},"interface BordaTourImageProps {\n  variant: BordaTourImageVariant;\n  aria: Partial\u003CComponentAriaProps>;\n  customClasses: Partial\u003CBordaImageCustomClasses>;\n  customStyles: Partial\u003CBordaImageCustomStyles>;\n  customHtml: Partial\u003CBordaImageCustomHtml>;\n}\n",[282,869,870,880,891,910,926,942,958],{"__ignoreMap":440},[444,871,872,875,878],{"class":446,"line":447},[444,873,863],{"class":874},"spNyl",[444,876,877],{"class":767}," BordaTourImageProps",[444,879,660],{"class":454},[444,881,882,885,887,889],{"class":446,"line":481},[444,883,884],{"class":513},"  variant",[444,886,517],{"class":454},[444,888,459],{"class":767},[444,890,478],{"class":454},[444,892,893,896,898,901,904,907],{"class":446,"line":488},[444,894,895],{"class":513},"  aria",[444,897,517],{"class":454},[444,899,900],{"class":767}," Partial",[444,902,903],{"class":454},"\u003C",[444,905,906],{"class":767},"ComponentAriaProps",[444,908,909],{"class":454},">;\n",[444,911,912,915,917,919,921,924],{"class":446,"line":510},[444,913,914],{"class":513},"  customClasses",[444,916,517],{"class":454},[444,918,900],{"class":767},[444,920,903],{"class":454},[444,922,923],{"class":767},"BordaImageCustomClasses",[444,925,909],{"class":454},[444,927,928,931,933,935,937,940],{"class":446,"line":523},[444,929,930],{"class":513},"  customStyles",[444,932,517],{"class":454},[444,934,900],{"class":767},[444,936,903],{"class":454},[444,938,939],{"class":767},"BordaImageCustomStyles",[444,941,909],{"class":454},[444,943,944,947,949,951,953,956],{"class":446,"line":529},[444,945,946],{"class":513},"  customHtml",[444,948,517],{"class":454},[444,950,900],{"class":767},[444,952,903],{"class":454},[444,954,955],{"class":767},"BordaImageCustomHtml",[444,957,909],{"class":454},[444,959,960],{"class":446,"line":547},[444,961,962],{"class":454},"}\n",[964,965,966],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":440,"searchDepth":447,"depth":481,"links":968},[969,970,971],{"id":297,"depth":481,"text":298},{"id":697,"depth":481,"text":698},{"id":863,"depth":481,"text":864},"Display an image above the tooltip heading with default or bleed variants.","md",null,{},{"title":77,"description":972},"ejXhGHTy1H3v646fsAfWi9MuEQVm5CSDhMDmxjvzn80",[979,981],{"title":73,"path":74,"stem":75,"description":980,"children":-1},"Positioned tooltip with title, description, arrow, and auto-flip placement.",{"title":81,"path":82,"stem":83,"description":982,"children":-1},"Navigation buttons for prev, next, finish, and skip actions.",1784550677385]