[{"data":1,"prerenderedAt":777},["ShallowReactive",2],{"navigation":3,"/examples/custom-styling":272,"/examples/custom-styling-surround":772},[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":214,"body":274,"description":766,"extension":767,"links":768,"meta":769,"navigation":357,"path":215,"seo":770,"stem":216,"__hash__":771},"docs/08.examples/03.custom-styling.md",{"type":275,"value":276,"toc":763},"minimark",[277,285,292,297,759],[278,279,281],"div",{"id":280},"styling-description",[282,283,284],"p",{},"Customize the look and feel of the tour by overriding inline styles on individual tooltip elements — no source modification.",[286,287,288],"borda-container",{},[289,290],"borda-component",{":config":291},"{\"steps\":[{\"target\":\"#page-header\",\"title\":\"Page header\",\"description\":\"Every page has a header — Borda spotlights it as the tour starting point.\",\"placement\":\"bottom-start\"},{\"target\":\"#styling-description\",\"title\":\"Custom styling\",\"description\":\"Override tooltip appearance with customStyles — no source modification.\",\"placement\":\"bottom-start\"},{\"target\":\"#code\",\"title\":\"Code section\",\"description\":\"The code block shows the full config for styling the title, description, and buttons.\",\"placement\":\"top-start\"},{\"target\":\"#code-block\",\"title\":\"Title & description\",\"description\":\"customStyles.title and customStyles.description override text color and size independently.\",\"placement\":\"top-start\"},{\"target\":\"#code-block\",\"title\":\"Button styles\",\"description\":\"tourButtons.customStyles restyles individual buttons, like next.\",\"placement\":\"middle-end\"}],\"scroll\":{\"block\":\"center\",\"duration\":400},\"tourTooltip\":{\"customStyles\":{\"title\":{\"color\":\"#013EFB\",\"fontSize\":\"18px\"},\"description\":{\"color\":\"#3f3f46\"}}},\"tourButtons\":{\"customStyles\":{\"next\":{\"background\":\"#013EFB\",\"color\":\"rgb(255, 255, 255)\",\"borderRadius\":\"8px\",\"border\":\"none\",\"padding\":\"6px 16px\"}}}}",[293,294,296],"h2",{"id":295},"code","Code",[278,298,300],{"id":299},"code-block",[301,302,308],"pre",{"className":303,"code":304,"filename":305,"language":306,"meta":307,"style":307},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useBorda, ComponentPlacement } from '@retoo/borda';\n\nimport '@retoo/borda/styles';\n\nconst borda = useBorda();\n\nawait borda.mount({\n  steps: [\n    {\n      target: '#element',\n      title: 'Custom styled',\n      description: 'This tooltip has custom title and description styles.',\n      placement: ComponentPlacement.BOTTOM_START,\n    },\n  ],\n  tourTooltip: {\n    customStyles: {\n      title: { color: '#013EFB', fontSize: '18px' },\n      description: { color: '#3f3f46' },\n    },\n  },\n  tourButtons: {\n    customStyles: {\n      next: {\n        background: '#013EFB',\n        color: 'rgb(255, 255, 255)',\n        borderRadius: '8px',\n        border: 'none',\n        padding: '6px 16px',\n      },\n    },\n  },\n});\n","main.ts","ts","",[295,309,310,352,359,373,378,399,404,425,438,444,462,479,496,513,519,527,538,548,586,608,613,619,629,638,648,664,681,698,715,732,738,743,748],{"__ignoreMap":307},[311,312,315,319,323,327,330,333,336,339,342,346,349],"span",{"class":313,"line":314},"line",1,[311,316,318],{"class":317},"s7zQu","import",[311,320,322],{"class":321},"sMK4o"," {",[311,324,326],{"class":325},"sTEyZ"," useBorda",[311,328,329],{"class":321},",",[311,331,332],{"class":325}," ComponentPlacement",[311,334,335],{"class":321}," }",[311,337,338],{"class":317}," from",[311,340,341],{"class":321}," '",[311,343,345],{"class":344},"sfazB","@retoo/borda",[311,347,348],{"class":321},"'",[311,350,351],{"class":321},";\n",[311,353,355],{"class":313,"line":354},2,[311,356,358],{"emptyLinePlaceholder":357},true,"\n",[311,360,362,364,366,369,371],{"class":313,"line":361},3,[311,363,318],{"class":317},[311,365,341],{"class":321},[311,367,368],{"class":344},"@retoo/borda/styles",[311,370,348],{"class":321},[311,372,351],{"class":321},[311,374,376],{"class":313,"line":375},4,[311,377,358],{"emptyLinePlaceholder":357},[311,379,381,385,388,391,394,397],{"class":313,"line":380},5,[311,382,384],{"class":383},"spNyl","const",[311,386,387],{"class":325}," borda ",[311,389,390],{"class":321},"=",[311,392,326],{"class":393},"s2Zo4",[311,395,396],{"class":325},"()",[311,398,351],{"class":321},[311,400,402],{"class":313,"line":401},6,[311,403,358],{"emptyLinePlaceholder":357},[311,405,407,410,413,416,419,422],{"class":313,"line":406},7,[311,408,409],{"class":317},"await",[311,411,412],{"class":325}," borda",[311,414,415],{"class":321},".",[311,417,418],{"class":393},"mount",[311,420,421],{"class":325},"(",[311,423,424],{"class":321},"{\n",[311,426,428,432,435],{"class":313,"line":427},8,[311,429,431],{"class":430},"swJcz","  steps",[311,433,434],{"class":321},":",[311,436,437],{"class":325}," [\n",[311,439,441],{"class":313,"line":440},9,[311,442,443],{"class":321},"    {\n",[311,445,447,450,452,454,457,459],{"class":313,"line":446},10,[311,448,449],{"class":430},"      target",[311,451,434],{"class":321},[311,453,341],{"class":321},[311,455,456],{"class":344},"#element",[311,458,348],{"class":321},[311,460,461],{"class":321},",\n",[311,463,465,468,470,472,475,477],{"class":313,"line":464},11,[311,466,467],{"class":430},"      title",[311,469,434],{"class":321},[311,471,341],{"class":321},[311,473,474],{"class":344},"Custom styled",[311,476,348],{"class":321},[311,478,461],{"class":321},[311,480,482,485,487,489,492,494],{"class":313,"line":481},12,[311,483,484],{"class":430},"      description",[311,486,434],{"class":321},[311,488,341],{"class":321},[311,490,491],{"class":344},"This tooltip has custom title and description styles.",[311,493,348],{"class":321},[311,495,461],{"class":321},[311,497,499,502,504,506,508,511],{"class":313,"line":498},13,[311,500,501],{"class":430},"      placement",[311,503,434],{"class":321},[311,505,332],{"class":325},[311,507,415],{"class":321},[311,509,510],{"class":325},"BOTTOM_START",[311,512,461],{"class":321},[311,514,516],{"class":313,"line":515},14,[311,517,518],{"class":321},"    },\n",[311,520,522,525],{"class":313,"line":521},15,[311,523,524],{"class":325},"  ]",[311,526,461],{"class":321},[311,528,530,533,535],{"class":313,"line":529},16,[311,531,532],{"class":430},"  tourTooltip",[311,534,434],{"class":321},[311,536,537],{"class":321}," {\n",[311,539,541,544,546],{"class":313,"line":540},17,[311,542,543],{"class":430},"    customStyles",[311,545,434],{"class":321},[311,547,537],{"class":321},[311,549,551,553,555,557,560,562,564,567,569,571,574,576,578,581,583],{"class":313,"line":550},18,[311,552,467],{"class":430},[311,554,434],{"class":321},[311,556,322],{"class":321},[311,558,559],{"class":430}," color",[311,561,434],{"class":321},[311,563,341],{"class":321},[311,565,566],{"class":344},"#013EFB",[311,568,348],{"class":321},[311,570,329],{"class":321},[311,572,573],{"class":430}," fontSize",[311,575,434],{"class":321},[311,577,341],{"class":321},[311,579,580],{"class":344},"18px",[311,582,348],{"class":321},[311,584,585],{"class":321}," },\n",[311,587,589,591,593,595,597,599,601,604,606],{"class":313,"line":588},19,[311,590,484],{"class":430},[311,592,434],{"class":321},[311,594,322],{"class":321},[311,596,559],{"class":430},[311,598,434],{"class":321},[311,600,341],{"class":321},[311,602,603],{"class":344},"#3f3f46",[311,605,348],{"class":321},[311,607,585],{"class":321},[311,609,611],{"class":313,"line":610},20,[311,612,518],{"class":321},[311,614,616],{"class":313,"line":615},21,[311,617,618],{"class":321},"  },\n",[311,620,622,625,627],{"class":313,"line":621},22,[311,623,624],{"class":430},"  tourButtons",[311,626,434],{"class":321},[311,628,537],{"class":321},[311,630,632,634,636],{"class":313,"line":631},23,[311,633,543],{"class":430},[311,635,434],{"class":321},[311,637,537],{"class":321},[311,639,641,644,646],{"class":313,"line":640},24,[311,642,643],{"class":430},"      next",[311,645,434],{"class":321},[311,647,537],{"class":321},[311,649,651,654,656,658,660,662],{"class":313,"line":650},25,[311,652,653],{"class":430},"        background",[311,655,434],{"class":321},[311,657,341],{"class":321},[311,659,566],{"class":344},[311,661,348],{"class":321},[311,663,461],{"class":321},[311,665,667,670,672,674,677,679],{"class":313,"line":666},26,[311,668,669],{"class":430},"        color",[311,671,434],{"class":321},[311,673,341],{"class":321},[311,675,676],{"class":344},"rgb(255, 255, 255)",[311,678,348],{"class":321},[311,680,461],{"class":321},[311,682,684,687,689,691,694,696],{"class":313,"line":683},27,[311,685,686],{"class":430},"        borderRadius",[311,688,434],{"class":321},[311,690,341],{"class":321},[311,692,693],{"class":344},"8px",[311,695,348],{"class":321},[311,697,461],{"class":321},[311,699,701,704,706,708,711,713],{"class":313,"line":700},28,[311,702,703],{"class":430},"        border",[311,705,434],{"class":321},[311,707,341],{"class":321},[311,709,710],{"class":344},"none",[311,712,348],{"class":321},[311,714,461],{"class":321},[311,716,718,721,723,725,728,730],{"class":313,"line":717},29,[311,719,720],{"class":430},"        padding",[311,722,434],{"class":321},[311,724,341],{"class":321},[311,726,727],{"class":344},"6px 16px",[311,729,348],{"class":321},[311,731,461],{"class":321},[311,733,735],{"class":313,"line":734},30,[311,736,737],{"class":321},"      },\n",[311,739,741],{"class":313,"line":740},31,[311,742,518],{"class":321},[311,744,746],{"class":313,"line":745},32,[311,747,618],{"class":321},[311,749,751,754,757],{"class":313,"line":750},33,[311,752,753],{"class":321},"}",[311,755,756],{"class":325},")",[311,758,351],{"class":321},[760,761,762],"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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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);}",{"title":307,"searchDepth":314,"depth":354,"links":764},[765],{"id":295,"depth":354,"text":296},"Override tooltip title, description, and button appearance with customStyles.","md",null,{},{"title":214,"description":766},"enrkMIxx0JhIlMXeofckuLuAb5kyh6Fb9-V3HioGrdI",[773,775],{"title":210,"path":211,"stem":212,"description":774,"children":-1},"Tour with different target selectors — CSS id, class, and data attributes.",{"title":113,"path":218,"stem":219,"description":776,"children":-1},"Spotlight a single element with or without tooltip.",1784550681815]