[{"data":1,"prerenderedAt":1412},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":134,"api-none":377,"page-en-\u002Fcomponents\u002Fbb-tooltip":378,"pt-showcase-BbTooltip":1276},{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":4,"\u002Fen\u002Fcomponents\u002Fbb-accordion":5,"\u002Fit\u002Fcomponenti\u002Fbb-alert":6,"\u002Fen\u002Fcomponents\u002Fbb-alert":7,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":8,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":9,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":10,"\u002Fen\u002Fcomponents\u002Fbb-avatar":11,"\u002Fit\u002Fcomponenti\u002Fbb-badge":12,"\u002Fen\u002Fcomponents\u002Fbb-badge":13,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":14,"\u002Fen\u002Fcomponents\u002Fbb-base-button":15,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":16,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":17,"\u002Fit\u002Fcomponenti\u002Fbb-button":18,"\u002Fen\u002Fcomponents\u002Fbb-button":19,"\u002Fit\u002Fcomponenti\u002Fbb-calendar":20,"\u002Fen\u002Fcomponents\u002Fbb-calendar":21,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":22,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":23,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":24,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":25,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":26,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":27,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":28,"\u002Fen\u002Fcomponents\u002Fbb-color-input":29,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":30,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":31,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":32,"\u002Fen\u002Fcomponents\u002Fbb-confirm":33,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":34,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":35,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":36,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":37,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":38,"\u002Fen\u002Fcomponents\u002Fbb-dialog":39,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":40,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":41,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":42,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":43,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":44,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":45,"\u002Fit\u002Fcomponenti\u002Fbb-form":46,"\u002Fen\u002Fcomponents\u002Fbb-form":47,"\u002Fit\u002Fcomponenti\u002Fbb-hover-card":48,"\u002Fen\u002Fcomponents\u002Fbb-hover-card":49,"\u002Fit\u002Fcomponenti\u002Fbb-icon":50,"\u002Fen\u002Fcomponents\u002Fbb-icon":51,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":52,"\u002Fen\u002Fcomponents\u002Fbb-indicator":53,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":54,"\u002Fen\u002Fcomponents\u002Fbb-number-input":55,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":56,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":57,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":58,"\u002Fen\u002Fcomponents\u002Fbb-pagination":59,"\u002Fit\u002Fcomponenti\u002Fbb-popover":60,"\u002Fen\u002Fcomponents\u002Fbb-popover":61,"\u002Fit\u002Fcomponenti\u002Fbb-progress":62,"\u002Fen\u002Fcomponents\u002Fbb-progress":63,"\u002Fit\u002Fcomponenti\u002Fbb-radio":64,"\u002Fen\u002Fcomponents\u002Fbb-radio":65,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":66,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":67,"\u002Fit\u002Fcomponenti\u002Fbb-rating":68,"\u002Fen\u002Fcomponents\u002Fbb-rating":69,"\u002Fit\u002Fcomponenti\u002Fbb-select":70,"\u002Fen\u002Fcomponents\u002Fbb-select":71,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":72,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":73,"\u002Fit\u002Fcomponenti\u002Fbb-slider":74,"\u002Fen\u002Fcomponents\u002Fbb-slider":75,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":76,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":77,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":78,"\u002Fen\u002Fcomponents\u002Fbb-spinner":79,"\u002Fit\u002Fcomponenti\u002Fbb-switch":80,"\u002Fen\u002Fcomponents\u002Fbb-switch":81,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":82,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":83,"\u002Fit\u002Fcomponenti\u002Fbb-table":84,"\u002Fen\u002Fcomponents\u002Fbb-table":85,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":86,"\u002Fen\u002Fcomponents\u002Fbb-tabs":87,"\u002Fit\u002Fcomponenti\u002Fbb-tag":88,"\u002Fen\u002Fcomponents\u002Fbb-tag":89,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":90,"\u002Fen\u002Fcomponents\u002Fbb-text-input":91,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":92,"\u002Fen\u002Fcomponents\u002Fbb-textarea":93,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":94,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":95,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":96,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":97,"\u002Fit\u002Fcomponenti\u002Fbb-toast":98,"\u002Fen\u002Fcomponents\u002Fbb-toast":99,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":100,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":101,"\u002Fit\u002Fcomponenti\u002Fbb-tree":102,"\u002Fen\u002Fcomponents\u002Fbb-tree":103,"\u002Fit\u002Fguide\u002Fadoption-checklist":104,"\u002Fen\u002Fguides\u002Fadoption-checklist":105,"\u002Fit\u002Fguide\u002Fai-agents":106,"\u002Fen\u002Fguides\u002Fai-agents":107,"\u002Fit\u002Fguide\u002Fcoherence":108,"\u002Fen\u002Fguides\u002Fcoherence":109,"\u002Fit\u002Fguide\u002Fdesign-language":110,"\u002Fen\u002Fguides\u002Fdesign-language":111,"\u002Fit\u002Fguide\u002Fdesign-tokens":112,"\u002Fen\u002Fguides\u002Fdesign-tokens":113,"\u002Fit\u002Fguide\u002Ffetching-data":114,"\u002Fen\u002Fguides\u002Ffetching-data":115,"\u002Fit\u002Fguide\u002Ficons":116,"\u002Fen\u002Fguides\u002Ficons":117,"\u002Fit\u002Fguide\u002Finertia":118,"\u002Fen\u002Fguides\u002Finertia":119,"\u002Fit\u002Fguide\u002Finstallation":120,"\u002Fen\u002Fguides\u002Finstallation":121,"\u002Fit\u002Fguide\u002Fmigration":122,"\u002Fen\u002Fguides\u002Fmigration":123,"\u002Fit\u002Fguide\u002Fnuxt":124,"\u002Fen\u002Fguides\u002Fnuxt":125,"\u002Fit\u002Fguide\u002Foptions-and-items":126,"\u002Fen\u002Fguides\u002Foptions-and-items":127,"\u002Fit\u002Fguide\u002Fpassthrough":128,"\u002Fen\u002Fguides\u002Fpassthrough":129,"\u002Fit\u002Fguide\u002Fpreset-components":130,"\u002Fen\u002Fguides\u002Fpreset-components":131,"\u002Fit\u002Fguide\u002Fvalidated-forms":132,"\u002Fen\u002Fguides\u002Fvalidated-forms":133},"\u002Fen\u002Fcomponents\u002Fbb-accordion","\u002Fit\u002Fcomponenti\u002Fbb-accordion","\u002Fen\u002Fcomponents\u002Fbb-alert","\u002Fit\u002Fcomponenti\u002Fbb-alert","\u002Fen\u002Fcomponents\u002Fbb-asterisk","\u002Fit\u002Fcomponenti\u002Fbb-asterisk","\u002Fen\u002Fcomponents\u002Fbb-avatar","\u002Fit\u002Fcomponenti\u002Fbb-avatar","\u002Fen\u002Fcomponents\u002Fbb-badge","\u002Fit\u002Fcomponenti\u002Fbb-badge","\u002Fen\u002Fcomponents\u002Fbb-base-button","\u002Fit\u002Fcomponenti\u002Fbb-base-button","\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs","\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs","\u002Fen\u002Fcomponents\u002Fbb-button","\u002Fit\u002Fcomponenti\u002Fbb-button","\u002Fen\u002Fcomponents\u002Fbb-calendar","\u002Fit\u002Fcomponenti\u002Fbb-calendar","\u002Fen\u002Fcomponents\u002Fbb-checkbox","\u002Fit\u002Fcomponenti\u002Fbb-checkbox","\u002Fen\u002Fcomponents\u002Fbb-checkbox-group","\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group","\u002Fen\u002Fcomponents\u002Fbb-collapsible","\u002Fit\u002Fcomponenti\u002Fbb-collapsible","\u002Fen\u002Fcomponents\u002Fbb-color-input","\u002Fit\u002Fcomponenti\u002Fbb-color-input","\u002Fen\u002Fcomponents\u002Fbb-color-palette","\u002Fit\u002Fcomponenti\u002Fbb-color-palette","\u002Fen\u002Fcomponents\u002Fbb-confirm","\u002Fit\u002Fcomponenti\u002Fbb-confirm","\u002Fen\u002Fcomponents\u002Fbb-date-picker","\u002Fit\u002Fcomponenti\u002Fbb-date-picker","\u002Fen\u002Fcomponents\u002Fbb-date-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input","\u002Fen\u002Fcomponents\u002Fbb-dialog","\u002Fit\u002Fcomponenti\u002Fbb-dialog","\u002Fen\u002Fcomponents\u002Fbb-dropdown","\u002Fit\u002Fcomponenti\u002Fbb-dropdown","\u002Fen\u002Fcomponents\u002Fbb-dropdown-button","\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button","\u002Fen\u002Fcomponents\u002Fbb-dropzone","\u002Fit\u002Fcomponenti\u002Fbb-dropzone","\u002Fen\u002Fcomponents\u002Fbb-form","\u002Fit\u002Fcomponenti\u002Fbb-form","\u002Fen\u002Fcomponents\u002Fbb-hover-card","\u002Fit\u002Fcomponenti\u002Fbb-hover-card","\u002Fen\u002Fcomponents\u002Fbb-icon","\u002Fit\u002Fcomponenti\u002Fbb-icon","\u002Fen\u002Fcomponents\u002Fbb-indicator","\u002Fit\u002Fcomponenti\u002Fbb-indicator","\u002Fen\u002Fcomponents\u002Fbb-number-input","\u002Fit\u002Fcomponenti\u002Fbb-number-input","\u002Fen\u002Fcomponents\u002Fbb-off-canvas","\u002Fit\u002Fcomponenti\u002Fbb-off-canvas","\u002Fen\u002Fcomponents\u002Fbb-pagination","\u002Fit\u002Fcomponenti\u002Fbb-pagination","\u002Fen\u002Fcomponents\u002Fbb-popover","\u002Fit\u002Fcomponenti\u002Fbb-popover","\u002Fen\u002Fcomponents\u002Fbb-progress","\u002Fit\u002Fcomponenti\u002Fbb-progress","\u002Fen\u002Fcomponents\u002Fbb-radio","\u002Fit\u002Fcomponenti\u002Fbb-radio","\u002Fen\u002Fcomponents\u002Fbb-radio-group","\u002Fit\u002Fcomponenti\u002Fbb-radio-group","\u002Fen\u002Fcomponents\u002Fbb-rating","\u002Fit\u002Fcomponenti\u002Fbb-rating","\u002Fen\u002Fcomponents\u002Fbb-select","\u002Fit\u002Fcomponenti\u002Fbb-select","\u002Fen\u002Fcomponents\u002Fbb-select-popover","\u002Fit\u002Fcomponenti\u002Fbb-select-popover","\u002Fen\u002Fcomponents\u002Fbb-slider","\u002Fit\u002Fcomponenti\u002Fbb-slider","\u002Fen\u002Fcomponents\u002Fbb-smooth-height","\u002Fit\u002Fcomponenti\u002Fbb-smooth-height","\u002Fen\u002Fcomponents\u002Fbb-spinner","\u002Fit\u002Fcomponenti\u002Fbb-spinner","\u002Fen\u002Fcomponents\u002Fbb-switch","\u002Fit\u002Fcomponenti\u002Fbb-switch","\u002Fen\u002Fcomponents\u002Fbb-switch-group","\u002Fit\u002Fcomponenti\u002Fbb-switch-group","\u002Fen\u002Fcomponents\u002Fbb-table","\u002Fit\u002Fcomponenti\u002Fbb-table","\u002Fen\u002Fcomponents\u002Fbb-tabs","\u002Fit\u002Fcomponenti\u002Fbb-tabs","\u002Fen\u002Fcomponents\u002Fbb-tag","\u002Fit\u002Fcomponenti\u002Fbb-tag","\u002Fen\u002Fcomponents\u002Fbb-text-input","\u002Fit\u002Fcomponenti\u002Fbb-text-input","\u002Fen\u002Fcomponents\u002Fbb-textarea","\u002Fit\u002Fcomponenti\u002Fbb-textarea","\u002Fen\u002Fcomponents\u002Fbb-time-picker","\u002Fit\u002Fcomponenti\u002Fbb-time-picker","\u002Fen\u002Fcomponents\u002Fbb-time-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input","\u002Fen\u002Fcomponents\u002Fbb-toast","\u002Fit\u002Fcomponenti\u002Fbb-toast","\u002Fen\u002Fcomponents\u002Fbb-tooltip","\u002Fit\u002Fcomponenti\u002Fbb-tooltip","\u002Fen\u002Fcomponents\u002Fbb-tree","\u002Fit\u002Fcomponenti\u002Fbb-tree","\u002Fen\u002Fguides\u002Fadoption-checklist","\u002Fit\u002Fguide\u002Fadoption-checklist","\u002Fen\u002Fguides\u002Fai-agents","\u002Fit\u002Fguide\u002Fai-agents","\u002Fen\u002Fguides\u002Fcoherence","\u002Fit\u002Fguide\u002Fcoherence","\u002Fen\u002Fguides\u002Fdesign-language","\u002Fit\u002Fguide\u002Fdesign-language","\u002Fen\u002Fguides\u002Fdesign-tokens","\u002Fit\u002Fguide\u002Fdesign-tokens","\u002Fen\u002Fguides\u002Ffetching-data","\u002Fit\u002Fguide\u002Ffetching-data","\u002Fen\u002Fguides\u002Ficons","\u002Fit\u002Fguide\u002Ficons","\u002Fen\u002Fguides\u002Finertia","\u002Fit\u002Fguide\u002Finertia","\u002Fen\u002Fguides\u002Finstallation","\u002Fit\u002Fguide\u002Finstallation","\u002Fen\u002Fguides\u002Fmigration","\u002Fit\u002Fguide\u002Fmigration","\u002Fen\u002Fguides\u002Fnuxt","\u002Fit\u002Fguide\u002Fnuxt","\u002Fen\u002Fguides\u002Foptions-and-items","\u002Fit\u002Fguide\u002Foptions-and-items","\u002Fen\u002Fguides\u002Fpassthrough","\u002Fit\u002Fguide\u002Fpassthrough","\u002Fen\u002Fguides\u002Fpreset-components","\u002Fit\u002Fguide\u002Fpreset-components","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",[135,150,162,186,198,242,275,311,332,353,365,371],{"label":136,"entries":137},"Getting started",[138,142,146],{"title":139,"path":140,"order":141},"Installation","\u002Fguides\u002Finstallation",1,{"title":143,"path":144,"order":145},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"title":147,"path":148,"order":149},"Adoption checklist","\u002Fguides\u002Fadoption-checklist",3,{"label":151,"entries":152},"Design system",[153,156,159],{"title":154,"path":155,"order":141},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":157,"path":158,"order":145},"Design language","\u002Fguides\u002Fdesign-language",{"title":160,"path":161,"order":149},"Passthrough","\u002Fguides\u002Fpassthrough",{"label":163,"entries":164},"Playbooks",[165,168,171,174,178,182],{"title":166,"path":167,"order":141},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":169,"path":170,"order":145},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":172,"path":173,"order":149},"Coherence","\u002Fguides\u002Fcoherence",{"title":175,"path":176,"order":177},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":179,"path":180,"order":181},"Icons","\u002Fguides\u002Ficons",5,{"title":183,"path":184,"order":185},"Preset components","\u002Fguides\u002Fpreset-components",6,{"label":187,"entries":188},"Ecosystem",[189,192,195],{"title":190,"path":191,"order":141},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":193,"path":194,"order":145},"Nuxt","\u002Fguides\u002Fnuxt",{"title":196,"path":197,"order":149},"AI agents","\u002Fguides\u002Fai-agents",{"label":199,"entries":200},"Inputs",[201,204,207,210,213,216,219,222,226,230,234,238],{"title":202,"path":203,"component":202,"order":141},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":205,"path":206,"component":205,"order":145},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":208,"path":209,"component":208,"order":149},"BbCalendar","\u002Fcomponents\u002Fbb-calendar",{"title":211,"path":212,"component":211,"order":149},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":214,"path":215,"component":214,"order":177},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":217,"path":218,"component":217,"order":181},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":220,"path":221,"component":220,"order":185},"BbForm","\u002Fcomponents\u002Fbb-form",{"title":223,"path":224,"component":223,"order":225},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":227,"path":228,"component":227,"order":229},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":231,"path":232,"component":231,"order":233},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":235,"path":236,"component":235,"order":237},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":239,"path":240,"component":239,"order":241},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":243,"entries":244},"Selection",[245,248,251,254,257,260,263,266,269,272],{"title":246,"path":247,"component":246,"order":141},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":249,"path":250,"component":249,"order":145},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":252,"path":253,"component":252,"order":149},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":255,"path":256,"component":255,"order":177},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":258,"path":259,"component":258,"order":181},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":261,"path":262,"component":261,"order":185},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":264,"path":265,"component":264,"order":225},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":267,"path":268,"component":267,"order":229},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":270,"path":271,"component":270,"order":233},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":273,"path":274,"component":273,"order":237},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":276,"entries":277},"Overlay",[278,281,284,287,290,293,296,299,302,305,308],{"title":279,"path":280,"component":279,"order":141},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":282,"path":283,"component":282,"order":145},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":285,"path":286,"component":285,"order":149},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":288,"path":289,"component":288,"order":177},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":291,"path":292,"component":291,"order":181},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":294,"path":295,"component":294,"order":185},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":297,"path":298,"component":297,"order":225},"BbHoverCard","\u002Fcomponents\u002Fbb-hover-card",{"title":300,"path":301,"component":300,"order":225},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":303,"path":304,"component":303,"order":229},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":306,"path":307,"component":306,"order":233},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":309,"path":310,"component":309,"order":237},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":312,"entries":313},"Navigation",[314,317,320,323,326,329],{"title":315,"path":316,"component":315,"order":141},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":318,"path":319,"component":318,"order":145},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":321,"path":322,"component":321,"order":149},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":324,"path":325,"component":324,"order":177},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":327,"path":328,"component":327,"order":181},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":330,"path":331,"component":330,"order":185},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":333,"entries":334},"Feedback",[335,338,341,344,347,350],{"title":336,"path":337,"component":336,"order":141},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":339,"path":340,"component":339,"order":145},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":342,"path":343,"component":342,"order":149},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":345,"path":346,"component":345,"order":177},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":348,"path":349,"component":348,"order":181},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":351,"path":352,"component":351,"order":185},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":354,"entries":355},"Data Display",[356,359,362],{"title":357,"path":358,"component":357,"order":141},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":360,"path":361,"component":360,"order":145},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":363,"path":364,"component":363,"order":149},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":366,"entries":367},"Layout & Utility",[368],{"title":369,"path":370,"component":369,"order":141},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":372,"entries":373},"Other",[374],{"title":375,"path":376,"component":375,"order":141},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",null,{"id":379,"title":309,"body":380,"component":309,"description":1264,"extension":1265,"group":276,"meta":1266,"navigation":532,"order":237,"path":310,"sections":1267,"seo":1273,"stem":1274,"__hash__":1275},"docs_en\u002Fcomponents\u002Fbb-tooltip.md",{"type":381,"value":382,"toc":1255},"minimark",[383,424,427,435,442,446,453,458,464,653,656,679,724,727,736,765,775,783,801,863,869,910,924,938,941,947,979,982,998,1001,1015,1025,1031,1034,1037,1044,1050,1074,1077,1090,1136,1139,1211,1235,1251],[384,385,386,394],"when",{},[387,388,389,390,393],"p",{},"Reach for ",[391,392,309],"code",{}," to hang a short label on something the user is already\nlooking at. What an icon-only button does, what a piece of jargon means, the\nfull value behind a truncated cell.",[395,396,398],"template",{"v-slot:else":397},"",[399,400,401,410,417],"ul",{},[402,403,404,409],"li",{},[405,406,407],"a",{"href":60},[391,408,303],{},": the hint holds something to click,\nor should stay open while the reader works through it",[402,411,412,416],{},[405,413,414],{"href":48},[391,415,297],{},": the hint previews what a\nlink points at, such as a person or an event",[402,418,419,423],{},[405,420,421],{"href":40},[391,422,291],{},": it is a menu of actions",[387,425,426],{},"A tooltip describes, a popover contains. The bubble never takes focus, so a link\nor a button inside it is unreachable from a keyboard.",[428,429,431],"h2",{"id":430},"hints",[432,433,434],"span",{},"Hints on a control",[387,436,437,438,441],{},"Keep required guidance visible and use a tooltip for the aside. Put\n",[391,439,440],{},"v-bb-tooltip"," on the control, with the label as its value.",[443,444],"demo",{"name":445},"BbTooltip\u002FFieldHint",[387,447,448,449,452],{},"The classic pairing is an icon-only button. Keep its ",[391,450,451],{},"aria-label"," as well: the\nlabel names the control, the tooltip describes it. Delete the label because \"the\ntooltip already says it\" and the button becomes nameless for a screen reader.",[454,455,457],"h3",{"id":456},"directive-or-component","Directive or component",[387,459,460,461,463],{},"When the label is plain text, use the directive. ",[391,462,440],{}," attaches a\ntooltip to any element with no wrapper and no slot, which is what makes it the\nright tool inside a table. Its three forms:",[465,466,470],"pre",{"className":467,"code":468,"language":469,"meta":397,"style":397},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003C!-- string shorthand: the value is the label; an info tip is an icon-only ghost button -->\n\u003CBbButton variant=\"ghost\" icon=\"lucide:info\" v-bb-tooltip=\"'Prices include VAT'\">About prices\u003C\u002FBbButton>\n\n\u003C!-- the directive argument sets the placement -->\n\u003CBbButton\n    v-bb-tooltip:bottom=\"'Saved automatically'\"\n    aria-label=\"Saved\"\n    icon=\"lucide:check\"\n\u002F>\n\n\u003C!-- object form: a required text plus any BbTooltip prop but `activator` (the directive uses its own element) -->\n\u003CBbButton\n    v-bb-tooltip=\"{ text: 'Archive (E)', placement: 'right', delay: 300 }\"\n    aria-label=\"Archive\"\n    icon=\"lucide:archive\"\n\u002F>\n\n\u003C!-- an empty value attaches nothing, so it is safe to bind conditionally;\n     the one span here, because the truncated text is already in the page -->\n\u003Cspan v-bb-tooltip=\"isTruncated ? label : ''\">{{ label }}\u003C\u002Fspan>\n","vue",[391,471,472,479,528,534,539,546,567,577,587,592,596,601,607,613,619,625,630,635,641,647],{"__ignoreMap":397},[432,473,475],{"class":474,"line":141},"line",[432,476,478],{"class":477},"sLBg1","\u003C!-- string shorthand: the value is the label; an info tip is an icon-only ghost button -->\n",[432,480,481,485,488,492,495,499,502,504,507,510,512,515,518,520,523,525],{"class":474,"line":145},[432,482,484],{"class":483},"suds8","\u003C",[432,486,205],{"class":487},"sne4z",[432,489,491],{"class":490},"s-5SL"," variant",[432,493,494],{"class":483},"=",[432,496,498],{"class":497},"sT6z2","\"ghost\"",[432,500,501],{"class":490}," icon",[432,503,494],{"class":483},[432,505,506],{"class":497},"\"lucide:info\"",[432,508,509],{"class":490}," v-bb-tooltip",[432,511,494],{"class":483},[432,513,514],{"class":483},"\"",[432,516,517],{"class":497},"'Prices include VAT'",[432,519,514],{"class":483},[432,521,522],{"class":483},">About prices\u003C\u002F",[432,524,205],{"class":487},[432,526,527],{"class":483},">\n",[432,529,530],{"class":474,"line":149},[432,531,533],{"emptyLinePlaceholder":532},true,"\n",[432,535,536],{"class":474,"line":177},[432,537,538],{"class":477},"\u003C!-- the directive argument sets the placement -->\n",[432,540,541,543],{"class":474,"line":181},[432,542,484],{"class":483},[432,544,545],{"class":487},"BbButton\n",[432,547,548,551,554,557,559,561,564],{"class":474,"line":185},[432,549,550],{"class":490},"    v-bb-tooltip",[432,552,553],{"class":483},":",[432,555,556],{"class":490},"bottom",[432,558,494],{"class":483},[432,560,514],{"class":483},[432,562,563],{"class":497},"'Saved automatically'",[432,565,566],{"class":483},"\"\n",[432,568,569,572,574],{"class":474,"line":225},[432,570,571],{"class":490},"    aria-label",[432,573,494],{"class":483},[432,575,576],{"class":497},"\"Saved\"\n",[432,578,579,582,584],{"class":474,"line":229},[432,580,581],{"class":490},"    icon",[432,583,494],{"class":483},[432,585,586],{"class":497},"\"lucide:check\"\n",[432,588,589],{"class":474,"line":233},[432,590,591],{"class":483},"\u002F>\n",[432,593,594],{"class":474,"line":237},[432,595,533],{"emptyLinePlaceholder":532},[432,597,598],{"class":474,"line":241},[432,599,600],{"class":483},"\u003C!-- object form: a required text plus any BbTooltip prop but `activator` (the directive uses its own element) -->\n",[432,602,604],{"class":474,"line":603},12,[432,605,606],{"class":483},"\u003CBbButton\n",[432,608,610],{"class":474,"line":609},13,[432,611,612],{"class":483},"    v-bb-tooltip=\"{ text: 'Archive (E)', placement: 'right', delay: 300 }\"\n",[432,614,616],{"class":474,"line":615},14,[432,617,618],{"class":483},"    aria-label=\"Archive\"\n",[432,620,622],{"class":474,"line":621},15,[432,623,624],{"class":483},"    icon=\"lucide:archive\"\n",[432,626,628],{"class":474,"line":627},16,[432,629,591],{"class":483},[432,631,633],{"class":474,"line":632},17,[432,634,533],{"emptyLinePlaceholder":532},[432,636,638],{"class":474,"line":637},18,[432,639,640],{"class":483},"\u003C!-- an empty value attaches nothing, so it is safe to bind conditionally;\n",[432,642,644],{"class":474,"line":643},19,[432,645,646],{"class":483},"     the one span here, because the truncated text is already in the page -->\n",[432,648,650],{"class":474,"line":649},20,[432,651,652],{"class":483},"\u003Cspan v-bb-tooltip=\"isTruncated ? label : ''\">{{ label }}\u003C\u002Fspan>\n",[443,654],{"name":655},"BbTooltip\u002FTruncatedCells",[387,657,658,659,665,666,672,673,675,676,553],{},"Escalate to the component only when you need a slot: markup inside the label, or\nthe ",[405,660,662],{"href":661},"\u002Fen\u002Fcomponents\u002Fbb-tooltip\u002Fapi#slot-activator",[391,663,664],{},"activator"," scope to make the trigger react. Pass the label to\n",[405,667,669],{"href":668},"\u002Fen\u002Fcomponents\u002Fbb-tooltip\u002Fapi#prop-text",[391,670,671],{},"text",", put the trigger in the ",[391,674,664],{}," slot and spread its ",[391,677,678],{},"props",[465,680,682],{"className":467,"code":681,"language":469,"meta":397,"style":397},"\u003CBbTooltip text=\"Download CSV\">\n    \u003Ctemplate #activator=\"{ props }\">\n        \u003CBbButton v-bind=\"props\" aria-label=\"Download CSV\" icon=\"lucide:download\" \u002F>\n    \u003C\u002Ftemplate>\n\u003C\u002FBbTooltip>\n",[391,683,684,700,705,710,715],{"__ignoreMap":397},[432,685,686,688,690,693,695,698],{"class":474,"line":141},[432,687,484],{"class":483},[432,689,309],{"class":487},[432,691,692],{"class":490}," text",[432,694,494],{"class":483},[432,696,697],{"class":497},"\"Download CSV\"",[432,699,527],{"class":483},[432,701,702],{"class":474,"line":145},[432,703,704],{"class":483},"    \u003Ctemplate #activator=\"{ props }\">\n",[432,706,707],{"class":474,"line":149},[432,708,709],{"class":483},"        \u003CBbButton v-bind=\"props\" aria-label=\"Download CSV\" icon=\"lucide:download\" \u002F>\n",[432,711,712],{"class":474,"line":177},[432,713,714],{"class":483},"    \u003C\u002Ftemplate>\n",[432,716,717,720,722],{"class":474,"line":181},[432,718,719],{"class":483},"\u003C\u002F",[432,721,309],{"class":487},[432,723,527],{"class":483},[387,725,726],{},"If the label is a string, it is the directive.",[387,728,729,730,735],{},"When the trigger is not yours to wrap (an element another component renders,\nlike the native input of a selection tile), pass it as\n",[405,731,733],{"href":732},"\u002Fen\u002Fcomponents\u002Fbb-tooltip\u002Fapi#prop-activator",[391,734,664],{}," instead: an element,\na component ref or a CSS selector string, looked up once the tooltip mounts.",[465,737,739],{"className":467,"code":738,"language":469,"meta":397,"style":397},"\u003CBbTooltip activator=\"#export-format-csv\" text=\"Comma-separated, opens in any spreadsheet\" \u002F>\n",[391,740,741],{"__ignoreMap":397},[432,742,743,745,747,750,752,755,757,759,762],{"class":474,"line":141},[432,744,484],{"class":483},[432,746,309],{"class":487},[432,748,749],{"class":490}," activator",[432,751,494],{"class":483},[432,753,754],{"class":497},"\"#export-format-csv\"",[432,756,692],{"class":490},[432,758,494],{"class":483},[432,760,761],{"class":497},"\"Comma-separated, opens in any spreadsheet\"",[432,763,764],{"class":483}," \u002F>\n",[387,766,767,768,770,771,774],{},"Each element with the directive mounts one small ",[391,769,309],{}," as soon as it\nmounts, not on the first hover. That is what wires ",[391,772,773],{},"aria-describedby"," before\nanyone points at it, so a screen reader reads the label on first focus. A long table therefore mounts one per row: bind an empty value on\nthe rows that do not need one.",[387,776,777,778,782],{},"The directive adds nothing to server-rendered HTML: it attaches on the client.\nThe component with a ",[405,779,780],{"href":668},[391,781,671],{}," prop puts its description in the server HTML,\nwhich matters only when a crawler or a no-JS reader must get the text.",[387,784,785,786,789,790,793,794,797,798,553],{},"The plugin registers the directive globally (",[391,787,788],{},"injectDirectives",", on by\ndefault). Importing ",[391,791,792],{},"vBbTooltip"," in ",[391,795,796],{},"\u003Cscript setup>"," registers it locally\ninstead, which is what the demos on this site do. To register it by hand, or\nunder another name, install ",[391,799,800],{},"BbTooltipDirectivePlugin",[465,802,806],{"className":803,"code":804,"language":805,"meta":397,"style":397},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","import { BbTooltipDirectivePlugin } from 'bitboss-ui';\n\napp.use(BbTooltipDirectivePlugin); \u002F\u002F v-bb-tooltip\napp.use(BbTooltipDirectivePlugin, 'tooltip'); \u002F\u002F v-tooltip (not typed)\n","ts",[391,807,808,826,830,845],{"__ignoreMap":397},[432,809,810,814,817,820,823],{"class":474,"line":141},[432,811,813],{"class":812},"sHUrx","import",[432,815,816],{"class":483}," { BbTooltipDirectivePlugin } ",[432,818,819],{"class":812},"from",[432,821,822],{"class":497}," 'bitboss-ui'",[432,824,825],{"class":483},";\n",[432,827,828],{"class":474,"line":145},[432,829,533],{"emptyLinePlaceholder":532},[432,831,832,835,839,842],{"class":474,"line":149},[432,833,834],{"class":483},"app.",[432,836,838],{"class":837},"sKwhi","use",[432,840,841],{"class":483},"(BbTooltipDirectivePlugin); ",[432,843,844],{"class":477},"\u002F\u002F v-bb-tooltip\n",[432,846,847,849,851,854,857,860],{"class":474,"line":177},[432,848,834],{"class":483},[432,850,838],{"class":837},[432,852,853],{"class":483},"(BbTooltipDirectivePlugin, ",[432,855,856],{"class":497},"'tooltip'",[432,858,859],{"class":483},"); ",[432,861,862],{"class":477},"\u002F\u002F v-tooltip (not typed)\n",[428,864,866],{"id":865},"accessibility",[432,867,868],{},"Keyboard and assistive technology",[387,870,871,875,876,879,880,883,884,887,888,890,891,893,894,897,898,900,901,905,906,909],{},[872,873,874],"strong",{},"A tooltip needs a focusable trigger."," It opens on hover, after ",[391,877,878],{},"delay",",\nand on ",[391,881,882],{},":focus-visible",", at once. That only helps if the element can take\nfocus. A ",[391,885,886],{},"\u003Cspan>"," cannot, so put the tooltip on a button, a link or a field. On a\nbare ",[391,889,360],{},", a ",[391,892,886],{}," or an ",[391,895,896],{},"\u003Csvg>"," the tip is pointer-only: keyboard and\ntouch never open it, so use that only when the tip repeats text already on the\npage. An info icon is an icon-only ghost ",[391,899,205],{},", its slot text the name and\nthe tip the description. Text that must be readable on touch belongs in a\n",[405,902,903],{"href":60},[391,904,303],{}," toggletip. Never add a ",[391,907,908],{},"tabindex"," to an\nicon: it becomes a tab stop with no role.",[387,911,912,915,916,919,920,923],{},[872,913,914],{},"The bubble is hidden from assistive technology."," Its text reaches a screen\nreader as the trigger's description, once, and a tooltip inside a ",[391,917,918],{},"\u003Clabel>"," does\nnot join the control's name. In tests, assert the trigger's description\n(",[391,921,922],{},"toHaveAccessibleDescription('…')",") instead of looking the bubble up by role.",[387,925,926,929,930,933,934,937],{},[872,927,928],{},"A tooltip is never the only home for a fact."," Hover text does not exist on a\ntouch screen. It does not print, and it is gone the moment the pointer moves.\nAnything the user must know to fill the field in correctly belongs in\n",[391,931,932],{},"description"," or ",[391,935,936],{},"hint"," on the field itself. The tooltip carries the aside.",[387,939,940],{},"The truncated cell above is the one exception: the full value is already a\ntext node in the page, so a screen reader reads it either way.",[428,942,944],{"id":943},"placement",[432,945,946],{},"Placement, timing and width",[387,948,949,954,955,958,959,961,962,961,965,967,968,971,972,967,975,978],{},[405,950,952],{"href":951},"\u002Fen\u002Fcomponents\u002Fbb-tooltip\u002Fapi#prop-placement",[391,953,943],{}," defaults to ",[391,956,957],{},"top"," and offers the ",[391,960,957],{},", ",[391,963,964],{},"right",[391,966,556],{}," and ",[391,969,970],{},"left","\nfamilies with ",[391,973,974],{},"-start",[391,976,977],{},"-end"," alignment.",[443,980],{"name":981},"BbTooltip\u002FPlacement",[387,983,984,989,990,993,994,997],{},[405,985,987],{"href":986},"\u002Fen\u002Fcomponents\u002Fbb-tooltip\u002Fapi#prop-delay",[391,988,878],{}," (ms, ",[391,991,992],{},"100"," by default) holds the hover opening back until the pointer\nsettles, so a cursor crossing a row of buttons does not flash a bubble for each.\nOnce one tooltip has shown, a neighbour reached within 300 ms opens at once,\nand keyboard focus never waits; ",[391,995,996],{},":delay=\"0\""," opens on hover at once too. It delays only the open, so it is not a\nway to keep a tooltip on screen longer.",[443,999],{"name":1000},"BbTooltip\u002FToolbar",[387,1002,1003,1004,1007,1008,1014],{},"Bubbles wrap at ",[391,1005,1006],{},"40ch"," on their own. ",[405,1009,1011],{"href":1010},"\u002Fen\u002Fcomponents\u002Fbb-tooltip\u002Fapi#prop-width",[391,1012,1013],{},"width"," sets a different maximum for one\nhint: pixels, a percentage of the trigger, or any CSS length. A short hint still\nshrinks to its text.",[387,1016,1017,1018,1024],{},"A tooltip gives way to anything the user opened on purpose. A click or\nright-click on the trigger hides it, and while a menu, popover, dialog, select\nor picker is open, tooltips on triggers outside it stay quiet. Nothing reshows\nwhen the overlay closes. ",[405,1019,1021],{"href":1020},"\u002Fen\u002Fcomponents\u002Fbb-tooltip\u002Fapi#prop-disabled",[391,1022,1023],{},"disabled"," switches one off, and closes it if it is\nopen.",[428,1026,1028],{"id":1027},"content",[432,1029,1030],{},"Labels with markup",[387,1032,1033],{},"The default slot takes markup, which is how an action name gets its keyboard\nshortcut beside it.",[443,1035],{"name":1036},"BbTooltip\u002FShortcuts",[387,1038,1039,1040,1043],{},"The content stays a description. Everything in the slot is flattened into one\nstring, so a screen reader hears \"Search ⌘K\" as a single phrase. The rule about\ninteractive content holds here too: markup does not make the bubble focusable,\nand an ",[391,1041,1042],{},"\u003Ca>"," in there is unreachable.",[428,1045,1047],{"id":1046},"styling",[432,1048,1049],{},"Variants and styling",[387,1051,1052,1058,1059,1062,1063,1066,1067,1073],{},[405,1053,1055],{"href":1054},"\u002Fen\u002Fcomponents\u002Fbb-tooltip\u002Fapi#prop-variant",[391,1056,1057],{},"variant"," tints the bubble: ",[391,1060,1061],{},"default"," is the primary bubble and ",[391,1064,1065],{},"destructive","\nthe danger tint. ",[405,1068,1070],{"href":1069},"\u002Fen\u002Fcomponents\u002Fbb-tooltip\u002Fapi#prop-hideArrow",[391,1071,1072],{},"hide-arrow"," drops the point when it would land on a\nneighbouring control.",[443,1075],{"name":1076},"BbTooltip\u002FVariants",[387,1078,1079,1081,1082,1085,1086,1089],{},[391,1080,1057],{}," accepts only registered names, so ",[391,1083,1084],{},"variant=\"info\""," does not compile\nuntil ",[391,1087,1088],{},"info"," is in the plugin config:",[465,1091,1093],{"className":803,"code":1092,"language":805,"meta":397,"style":397},"\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n    bitboss: { tooltipVariants: ['info'] },\n});\n",[391,1094,1095,1100,1115,1129],{"__ignoreMap":397},[432,1096,1097],{"class":474,"line":141},[432,1098,1099],{"class":477},"\u002F\u002F nuxt.config.ts\n",[432,1101,1102,1105,1108,1111],{"class":474,"line":145},[432,1103,1104],{"class":812},"export",[432,1106,1107],{"class":812}," default",[432,1109,1110],{"class":837}," defineNuxtConfig",[432,1112,1114],{"class":1113},"soyes","({\n",[432,1116,1117,1120,1123,1126],{"class":474,"line":149},[432,1118,1119],{"class":483},"    bitboss: { tooltipVariants: [",[432,1121,1122],{"class":497},"'info'",[432,1124,1125],{"class":483},"] }",[432,1127,1128],{"class":1113},",\n",[432,1130,1131,1134],{"class":474,"line":177},[432,1132,1133],{"class":1113},"})",[432,1135,825],{"class":483},[387,1137,1138],{},"Registering a name gets you the type; the CSS is yours. Colour comes from three\ncustom properties on the tooltip root, which the component re-applies to the\nbubble and the arrow:",[465,1140,1144],{"className":1141,"code":1142,"language":1143,"meta":397,"style":397},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".bb-tooltip.bb-tooltip--info {\n    --bg: var(--bb-panel);\n    --fg: var(--bb-text);\n    --border-color: var(--bb-border);\n}\n","css",[391,1145,1146,1154,1174,1190,1206],{"__ignoreMap":397},[432,1147,1148,1151],{"class":474,"line":141},[432,1149,1150],{"class":490},".bb-tooltip.bb-tooltip--info",[432,1152,1153],{"class":483}," {\n",[432,1155,1156,1159,1162,1165,1168,1171],{"class":474,"line":145},[432,1157,1158],{"class":1113},"    --bg",[432,1160,1161],{"class":483},": ",[432,1163,1164],{"class":490},"var",[432,1166,1167],{"class":483},"(",[432,1169,1170],{"class":1113},"--bb-panel",[432,1172,1173],{"class":483},");\n",[432,1175,1176,1179,1181,1183,1185,1188],{"class":474,"line":149},[432,1177,1178],{"class":1113},"    --fg",[432,1180,1161],{"class":483},[432,1182,1164],{"class":490},[432,1184,1167],{"class":483},[432,1186,1187],{"class":1113},"--bb-text",[432,1189,1173],{"class":483},[432,1191,1192,1195,1197,1199,1201,1204],{"class":474,"line":177},[432,1193,1194],{"class":1113},"    --border-color",[432,1196,1161],{"class":483},[432,1198,1164],{"class":490},[432,1200,1167],{"class":483},[432,1202,1203],{"class":1113},"--bb-border",[432,1205,1173],{"class":483},[432,1207,1208],{"class":474,"line":181},[432,1209,1210],{"class":483},"}\n",[387,1212,1213,961,1216,967,1219,1222,1223,1226,1227,1230,1231,1234],{},[391,1214,1215],{},"--fs",[391,1217,1218],{},"--px",[391,1220,1221],{},"--py"," size the text and padding on the same root. To\nrestyle one tooltip, ",[391,1224,1225],{},"pt:panel"," reaches the bubble and ",[391,1228,1229],{},"pt:root"," the floating\nelement with its arrow; both take the ",[391,1232,1233],{},"open"," state.",[1236,1237,1238],"migration",{},[387,1239,1240,1241,1244,1245,1247,1248,1250],{},"The v2 ",[391,1242,1243],{},"theme"," prop became ",[391,1246,1057],{},", and it is typed. A hover now waits\n100 ms before the bubble opens (focus still opens it at once); ",[391,1249,996],{},"\nrestores the instant hover.",[1252,1253,1254],"style",{},"html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}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 .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .sKwhi, html code.shiki .sKwhi{--shiki-default:#622CBC;--shiki-dark:#DBB7FF}html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}",{"title":397,"searchDepth":149,"depth":149,"links":1256},[1257,1260,1261,1262,1263],{"id":430,"depth":145,"text":434,"children":1258},[1259],{"id":456,"depth":149,"text":457},{"id":865,"depth":145,"text":868},{"id":943,"depth":145,"text":946},{"id":1027,"depth":145,"text":1030},{"id":1046,"depth":145,"text":1049},"A short label attached to a control, as a component or as the v-bb-tooltip directive.","md",{},[1268,1269,1270,1271,1272],{"id":430,"title":434},{"id":865,"title":868},{"id":943,"title":946},{"id":1027,"title":1030},{"id":1046,"title":1049},{"title":309,"description":1264},"components\u002Fbb-tooltip","nBKh7awGBXfarK6_0KyvRlUT3fh9wDM0ub2G3-Pz384",{"name":309,"slug":1277,"group":276,"description":1278,"entrypoint":1279,"docs":1280,"props":1283,"models":1355,"events":1358,"slots":1363,"exposed":1372,"pt":1373,"validated":377,"migration":1388},"bb-tooltip","Displays contextual helper text on interaction.","bitboss-ui",{"contract":1281,"source":1282},"ai\u002FBbTooltip.md","ai\u002Fsource\u002FBbTooltip.md",[1284,1289,1295,1299,1302,1307,1311,1315,1319,1322,1325,1330,1334,1339,1342,1346,1351],{"name":664,"type":1285,"required":1286,"default":377,"description":1287,"note":1288,"demo":430},"ElementOrComponentRefOrSelector | undefined",false,"External activator: an HTMLElement, a Vue component ref, or a CSS selector string (looked up in the document once the tooltip mounts). When provided, the activator slot is not rendered and event listeners are attached programmatically to the referenced element.","Rarely what you want on a tooltip: `v-bb-tooltip` already attaches to an element without a wrapper and without a template ref. Reach for the prop when the trigger is owned by code you cannot annotate.",{"name":1290,"type":1291,"required":1286,"default":1292,"description":1293,"note":1294,"demo":1046},"arrowPadding","number | undefined","10","Space the arrow will maintain to the edge of the tooltip bubble. Useful when the floating element has border radius so it won't appear broken","How far the arrow stays from the corner of the bubble. Raise it when a rounded bubble makes the point look detached; it does nothing when `hide-arrow` is set.",{"name":1296,"type":1285,"required":1286,"default":377,"description":1297,"note":1298,"demo":377},"boundary","Constrains the tooltip within a bounding element: it stays inside it alongside its trigger (sideways for a tooltip above or below); away from the trigger it may pass the edge, and it flips at the viewport only. Accepts an HTMLElement, a Vue component ref, or a CSS selector string.","Constrains the bubble to a container instead of the viewport — a scrolling sidebar, a table body. Positioning only: it does not clip the text.",{"name":878,"type":1291,"required":1286,"default":992,"description":1300,"note":1301,"demo":943},"Milliseconds a pointer rests on the activator before the tooltip shows (`0`: at once). Keyboard focus shows it at once, and so does a pointer arriving while another tooltip shows or within 300 ms of one closing.","Delays the hover open only (100 ms by default): keyboard focus opens at once, and a tooltip reached within 300 ms of another one closing skips the wait. The close is always a short debounce so the pointer can travel from the trigger into the bubble, which is why this is not the prop for keeping a hint on screen longer.",{"name":1023,"type":1303,"required":1286,"default":1304,"description":1305,"note":1306,"demo":377},"boolean | undefined","false","Disables the component","Also dismisses a bubble that is already open, so it is safe to bind — the usual case being a hint that should stop firing once the same text is visible in the page.",{"name":1308,"type":1303,"required":1286,"default":1304,"description":1309,"note":1310,"demo":377},"eager","Renders the tooltip's popover and content at mount instead of on the first open. The description screen readers hear exists from mount either way.","The bubble is lazy and renders on first open. This matters less here than on `BbPopover`, because the `text` prop is written into an `sr-only` description at mount whether the bubble has opened or not.",{"name":1312,"type":1303,"required":1286,"default":1304,"description":1313,"note":1314,"demo":1046},"hideArrow","Hides the tooltip arrow. A tooltip shows its arrow by default (it's the one popover-family surface where an arrow is meaningful — a speech bubble pointing at its anchor); set this to drop it.","The tooltip is the one surface in the popover family that kept its arrow in v3 — popovers, dropdowns, selects and the colour palette all lost theirs. Set this on a dense row where the point would land on a neighbouring control.",{"name":1316,"type":1317,"required":1286,"default":377,"description":1318,"note":377,"demo":377},"id","string | undefined","Seed for the tooltip's internal id. It is **prefixed** (`bb_\u003Cid>`) and set on the inner content element, not on the root — so `document.getElementById(theIdYouPassed)` finds nothing. Pass it to make the generated id stable (SSR snapshots, tests), not to look the element up.",{"name":1320,"type":1303,"required":1286,"default":1304,"description":1321,"note":377,"demo":377},"modelValue","Used by v-model to show \u002F hide the tooltip. A tooltip with no `v-model` starts hidden and is driven by hover \u002F focus.",{"name":1323,"type":1291,"required":1286,"default":1292,"description":1324,"note":377,"demo":377},"padding","Minimum empty space to keep from the edge of the page",{"name":943,"type":1326,"required":1286,"default":1327,"description":1328,"note":1329,"demo":943},"Placement | undefined","\"top\"","Position of the overlay in respect to the related activator.","Flips itself near a viewport edge, so pick what reads best in the common case. Unlike `BbPopover` there is no `'cursor'` value: a tooltip belongs to its trigger, not to the pointer.",{"name":1331,"type":1332,"required":1286,"default":377,"description":1333,"note":377,"demo":377},"pt","PtMap\u003CBbTooltipPtPart, \"open\" | \"default\" | \"destructive\"> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes without the prefix. See the `pt:\u003Cpart>` row.",{"name":1335,"type":1336,"required":1286,"default":377,"description":1337,"note":377,"demo":1338},"pt:\u003Cpart>","PtValue | undefined","Passthrough, attribute form: one attribute per part, `pt:\u003Cpart>`, and per part and state, `pt:\u003Cpart>:\u003Cstate>`. Parts: `panel`, `root`. States: `default`, `destructive`, `open`.","passthrough",{"name":671,"type":1317,"required":1286,"default":377,"description":1340,"note":1341,"demo":430},"Text content of the component.","The plain-text label, and the form that also produces the description at mount. Use the default slot instead only when the label needs markup.",{"name":1343,"type":1291,"required":1286,"default":1344,"description":1345,"note":377,"demo":377},"transitionDuration","250","How long the transition has to last in milliseconds",{"name":1057,"type":1347,"required":1286,"default":1348,"description":1349,"note":1350,"demo":1046},"keyof TooltipVariantRegistry | undefined","\"default\"","Visual variant. `'default'` is the inverted (primary) bubble, `'destructive'` is the danger-tinted bubble for warnings. Any other string is applied as a `bb-tooltip--\u003Cname>` class hook.","Typed against the registered names, so `variant=\"info\"` is a compile error until `info` is added to `tooltipVariants` in the plugin config — and registering it gets you the type, not the CSS. `default` and `destructive` are the two that ship paint.",{"name":1013,"type":1352,"required":1286,"default":377,"description":1353,"note":1354,"demo":943},"string | number | undefined","Caps the bubble's width (it still shrinks to its text): a number is px, a percentage is of the activator, any other CSS length passes through. Replaces the default `40ch` cap, also `--max-w` on the tooltip root.","A maximum, not a fixed width: the bubble still shrinks to short text. Bubbles already wrap at `40ch`, so reach for this when one hint wants a different measure; for a library-wide change set `--max-w` on `.bb-tooltip` in CSS.",[1356],{"name":1320,"type":1303,"note":1357,"demo":377},"New in v3, and rarely the right tool: a hint the application opens rather than the reader is usually a coach mark, which needs a panel the user can move into — `BbPopover`.",[1359],{"name":1360,"signature":1361,"description":1362,"note":377,"demo":377},"update:modelValue","(value: boolean): void","Emitted with the new value whenever `v-model` changes.",[1364,1368],{"name":664,"type":1365,"description":1366,"note":1367,"demo":430},"BbTooltipActivatorSlotProps","Replaces the default trigger element that opens the tooltip.","Spread `props` onto an element that can take focus. On a `\u003Cspan>` the tooltip opens on hover only, which is the quietest accessibility bug on this component. The scope also carries `open`, `placement` and `disabled`.",{"name":1061,"type":1369,"description":1370,"note":1371,"demo":1027},"object","Content rendered inside the tooltip bubble.","Markup is allowed and is flattened into one `aria-describedby` string. It does not make the bubble focusable: a link or a button in here is unreachable by keyboard, and that is `BbPopover` territory.",[],{"parts":1374,"states":1381},[1375,1378],{"name":1376,"description":1377},"root","The floating element, arrow included; a `class` on the component lands here.",{"name":1379,"description":1380},"panel","The bubble that holds the text.",[1382,1384,1386],{"name":1061,"description":1383},"Component-wide: `variant: 'default'`. Merged after the part's base entry and before its states, so the real states still win.",{"name":1065,"description":1385},"Component-wide: `variant: 'destructive'`. Below the real states, like every variant.",{"name":1233,"description":1387},"Component-wide: the tooltip is showing.",{"removed":1389,"renamed":1407},[1390,1397,1400,1403],{"name":1391,"surface":1392,"replacedBy":377,"hint":377,"since":1393,"migration":1394,"silent":532,"fix":1395},"block","prop","3.0.0-alpha.9","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-tooltip.md",{"kind":1396},"remove",{"name":1398,"surface":1392,"replacedBy":377,"hint":377,"since":1393,"migration":1394,"silent":532,"fix":1399},"showClose",{"kind":1396},{"name":1243,"surface":1392,"replacedBy":1057,"hint":377,"since":1393,"migration":1394,"silent":532,"fix":1401},{"kind":1402},"rename",{"name":1404,"surface":1392,"replacedBy":878,"hint":377,"since":1405,"migration":1394,"silent":532,"fix":1406},"timeout","3.0.0-alpha.1",{"kind":1402},[1408,1410],{"from":1243,"to":1057,"surface":1392,"since":1393,"migration":1394,"fix":1409},{"kind":1402},{"from":1404,"to":878,"surface":1392,"since":1405,"migration":1394,"fix":1411},{"kind":1402},1793055147551]