{"record":{"id":"dff5362df844e9c6","repo":"twbs/bootstrap","slug":"please-use-show-on-visible-elements","errorCode":null,"errorMessage":"Please use show on visible elements","messagePattern":"Please use show on visible elements","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"js/src/tooltip.js","lineNumber":186,"sourceCode":"    this._enter()\n  }\n\n  dispose() {\n    clearTimeout(this._timeout)\n\n    EventHandler.off(this._element.closest(SELECTOR_MODAL), EVENT_MODAL_HIDE, this._hideModalHandler)\n\n    if (this._element.getAttribute('data-bs-original-title')) {\n      this._element.setAttribute('title', this._element.getAttribute('data-bs-original-title'))\n    }\n\n    this._disposePopper()\n    super.dispose()\n  }\n\n  show() {\n    if (this._element.style.display === 'none') {\n      throw new Error('Please use show on visible elements')\n    }\n\n    if (!(this._isWithContent() && this._isEnabled)) {\n      return\n    }\n\n    const showEvent = EventHandler.trigger(this._element, this.constructor.eventName(EVENT_SHOW))\n    const shadowRoot = findShadowRoot(this._element)\n    const isInTheDom = (shadowRoot || this._element.ownerDocument.documentElement).contains(this._element)\n\n    if (showEvent.defaultPrevented || !isInTheDom) {\n      return\n    }\n\n    // TODO: v6 remove this or make it optional\n    this._disposePopper()\n\n    const tip = this._getTipElement()","sourceCodeStart":168,"sourceCodeEnd":204,"githubUrl":"https://github.com/twbs/bootstrap/blob/6177d5f8497f2c08f9874f5221fd17ce5acd2ad7/js/src/tooltip.js#L168-L204","documentation":"Tooltip.show() opens with a hard precondition: the trigger element must not carry an inline display:none, because Popper cannot measure a hidden element to position the tip — hence a plain Error, not a TypeError. The check reads this._element.style.display only, before the content/enabled checks and before any show event fires. The hover/focus Data API practically never hits it because a display:none element cannot be hovered; it bites on programmatic show() calls.","triggerScenarios":"tip.show() on an element with style=\"display: none\" (hidden until first AJAX completes, onboarding pointers, collapsed panels); calling show() in a loop over a mixed list where some triggers are hidden; showing a tooltip for a button inside a template kept with inline display:none; calling show() from a timer that races with code that sets el.style.display = 'none'.","commonSituations":"Tooltips on elements revealed by app state (hidden tabs, gated features); scheduled/deferred show() calls; wrapper components that mount tooltips on conditionally rendered DOM; migration from v4 — the same guard existed there, so old hidden-element workarounds resurface.","solutions":["Remove the inline display:none from the trigger element before calling show().","Defer show() until visibility is real — e.g. inside shown.bs.modal / shown.bs.collapse handlers or after your own reveal transition.","Guard the call: if (el.style.display !== 'none') tip.show().","If the element must stay display:none, attach the tooltip to a visible wrapper element instead."],"exampleFix":"// before — el has style=\"display: none\"\nconst tip = bootstrap.Tooltip.getOrCreateInstance(el)\ntip.show() // Error: Please use show on visible elements\n\n// after — make the trigger visible first\nel.style.display = ''\ntip.show()","handlingStrategy":"validation","validationCode":"const canShowTooltip = (el) => el.style.display !== 'none'\n\nconst tip = bootstrap.Tooltip.getOrCreateInstance(el)\nif (canShowTooltip(el)) {\n  tip.show()\n} else {\n  console.warn('Tooltip: trigger is display:none — skipping show()')\n}","typeGuard":null,"tryCatchPattern":"try {\n  tip.show()\n} catch (err) {\n  if (err instanceof Error && err.message === 'Please use show on visible elements') {\n    // element hidden by app state: reveal it first, or attach the tooltip to a visible wrapper\n  } else {\n    throw err\n  }\n}","preventionTips":["Check el.style.display !== 'none' (or use el.checkVisibility?.()) before programmatic show().","Drive visibility-dependent tooltips from reveal events (shown.bs.modal, shown.bs.collapse).","Do not schedule show() on elements that hide/show from app state without a guard.","Attach tooltips for permanently hidden triggers to a visible wrapper element instead."],"tags":["bootstrap","tooltip","popover","visibility","dom"],"backgroundTag":"element-not-visible","analyzedSha":"6177d5f8497f2c08f9874f5221fd17ce5acd2ad7","analyzedAt":"2026-08-22T03:20:03.375Z","schemaVersion":2},"datasetVersion":"2026-08-22T04:17:13.399Z"}