mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-20 12:21:35 +02:00
Add v4.6.2 docs (#36726)
This commit is contained in:
XhmikosR
GitHub
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.88.1">
|
||||
<meta name="generator" content="Hugo 0.101.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.6">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
|
||||
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||
|
||||
<!-- Documentation extras -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -105,10 +105,10 @@
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-expanded="false">
|
||||
v4.6
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<button class="btn nav-link dropdown-toggle mr-md-2" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Bootstrap </span> v4.6 <span class="sr-only">(switch to other versions)</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-md-right">
|
||||
<a class="dropdown-item active" href="/docs/4.6/">Latest (4.6.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/">5.1.x</a>
|
||||
@@ -285,7 +285,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
@@ -316,7 +316,7 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
@@ -351,10 +351,10 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<p>Got all that? Great, let’s see how they work with some examples.</p>
|
||||
<h2 id="example-enable-tooltips-everywhere">Example: Enable tooltips everywhere</h2>
|
||||
<p>One way to initialize all tooltips on a page would be to select them by their <code>data-toggle</code> attribute:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'[data-toggle="tooltip"]'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">()</span>
|
||||
<span class="p">})</span>
|
||||
</code></pre></div><h2 id="examples">Examples</h2>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">$</span><span class="p">(</span><span class="s1">'[data-toggle="tooltip"]'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">()</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">})</span>
|
||||
</span></span></code></pre></div><h2 id="examples">Examples</h2>
|
||||
<p>Hover over the links below to see tooltips:</p>
|
||||
<div class="bd-example tooltip-demo">
|
||||
<p class="muted">Placeholder text to demonstrate some <a href="#" data-toggle="tooltip" title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-toggle="tooltip" title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-toggle="tooltip" title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-toggle="tooltip" title="The last tip!">your own</a> site or project.
|
||||
@@ -370,31 +370,31 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"tooltip"</span> <span class="na">data-placement</span><span class="o">=</span><span class="s">"top"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Tooltip on top"</span><span class="p">></span>
|
||||
Tooltip on top
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"tooltip"</span> <span class="na">data-placement</span><span class="o">=</span><span class="s">"right"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Tooltip on right"</span><span class="p">></span>
|
||||
Tooltip on right
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"tooltip"</span> <span class="na">data-placement</span><span class="o">=</span><span class="s">"bottom"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Tooltip on bottom"</span><span class="p">></span>
|
||||
Tooltip on bottom
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"tooltip"</span> <span class="na">data-placement</span><span class="o">=</span><span class="s">"left"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Tooltip on left"</span><span class="p">></span>
|
||||
Tooltip on left
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
</code></pre></div><p>And with custom HTML added:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"tooltip"</span> <span class="na">data-html</span><span class="o">=</span><span class="s">"true"</span> <span class="na">title</span><span class="o">=</span><span class="s">"<em>Tooltip</em> <u>with</u> <b>HTML</b>"</span><span class="p">></span>
|
||||
Tooltip with HTML
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
</code></pre></div><h2 id="usage">Usage</h2>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"tooltip"</span> <span class="na">data-placement</span><span class="o">=</span><span class="s">"top"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Tooltip on top"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> Tooltip on top
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"tooltip"</span> <span class="na">data-placement</span><span class="o">=</span><span class="s">"right"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Tooltip on right"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> Tooltip on right
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"tooltip"</span> <span class="na">data-placement</span><span class="o">=</span><span class="s">"bottom"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Tooltip on bottom"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> Tooltip on bottom
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"tooltip"</span> <span class="na">data-placement</span><span class="o">=</span><span class="s">"left"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Tooltip on left"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> Tooltip on left
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
</span></span></code></pre></div><p>And with custom HTML added:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"tooltip"</span> <span class="na">data-html</span><span class="o">=</span><span class="s">"true"</span> <span class="na">title</span><span class="o">=</span><span class="s">"<em>Tooltip</em> <u>with</u> <b>HTML</b>"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> Tooltip with HTML
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
</span></span></code></pre></div><h2 id="usage">Usage</h2>
|
||||
<p>The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.</p>
|
||||
<p>Trigger the tooltip via JavaScript:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#example'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span>
|
||||
</code></pre></div><div class="bd-callout bd-callout-warning">
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#example'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span>
|
||||
</span></span></code></pre></div><div class="bd-callout bd-callout-warning">
|
||||
<h5 id="overflow-auto-and-scroll">Overflow <code>auto</code> and <code>scroll</code></h5>
|
||||
<p>Tooltip position attempts to automatically change when a parent container has <code>overflow: auto</code> or <code>overflow: scroll</code> like our <code>.table-responsive</code>, but still keeps the original placement’s positioning. To resolve, set the <code>boundary</code> option to anything other than default value, <code>'scrollParent'</code>, such as <code>'window'</code>:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#example'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">({</span> <span class="nx">boundary</span><span class="o">:</span> <span class="s1">'window'</span> <span class="p">})</span>
|
||||
</code></pre></div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#example'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">({</span> <span class="nx">boundary</span><span class="o">:</span> <span class="s1">'window'</span> <span class="p">})</span>
|
||||
</span></span></code></pre></div>
|
||||
</div>
|
||||
|
||||
<h3 id="markup">Markup</h3>
|
||||
@@ -404,26 +404,26 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<p>You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as <code><span></code>s) can be made focusable by adding the <code>tabindex="0"</code> attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the tooltip in this situation. Additionally, do not rely solely on <code>hover</code> as the trigger for your tooltip, as this will make your tooltips impossible to trigger for keyboard users.
|
||||
</div>
|
||||
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- HTML to write --></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"tooltip"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Some tooltip text!"</span><span class="p">></span>Hover over me<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
|
||||
<span class="c"><!-- Generated markup by the plugin --></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tooltip bs-tooltip-top"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tooltip"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"arrow"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tooltip-inner"</span><span class="p">></span>
|
||||
Some tooltip text!
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><h3 id="disabled-elements">Disabled elements</h3>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- HTML to write --></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"tooltip"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Some tooltip text!"</span><span class="p">></span>Hover over me<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="c"><!-- Generated markup by the plugin --></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tooltip bs-tooltip-top"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tooltip"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"arrow"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tooltip-inner"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> Some tooltip text!
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><h3 id="disabled-elements">Disabled elements</h3>
|
||||
<p>Elements with the <code>disabled</code> attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper <code><div></code> or <code><span></code>, ideally made keyboard-focusable using <code>tabindex="0"</code>, and override the <code>pointer-events</code> on the disabled element.</p>
|
||||
<div class="tooltip-demo">
|
||||
<div class="bd-example">
|
||||
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
|
||||
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
|
||||
</span>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-inline-block"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"tooltip"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Disabled tooltip"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">style</span><span class="o">=</span><span class="s">"pointer-events: none;"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">disabled</span><span class="p">></span>Disabled button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">span</span><span class="p">></span></code></pre></div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-inline-block"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"tooltip"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Disabled tooltip"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">style</span><span class="o">=</span><span class="s">"pointer-events: none;"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">disabled</span><span class="p">></span>Disabled button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">span</span><span class="p">></span></span></span></code></pre></div>
|
||||
</div>
|
||||
<h3 id="options">Options</h3>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
|
||||
@@ -595,29 +595,29 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
|
||||
<p>Attaches a tooltip handler to an element collection.</p>
|
||||
<h4 id="tooltipshow"><code>.tooltip('show')</code></h4>
|
||||
<p>Reveals an element’s tooltip. <strong>Returns to the caller before the tooltip has actually been shown</strong> (i.e. before the <code>shown.bs.tooltip</code> event occurs). This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span>
|
||||
</code></pre></div><h4 id="tooltiphide"><code>.tooltip('hide')</code></h4>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span>
|
||||
</span></span></code></pre></div><h4 id="tooltiphide"><code>.tooltip('hide')</code></h4>
|
||||
<p>Hides an element’s tooltip. <strong>Returns to the caller before the tooltip has actually been hidden</strong> (i.e. before the <code>hidden.bs.tooltip</code> event occurs). This is considered a “manual” triggering of the tooltip.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span>
|
||||
</code></pre></div><h4 id="tooltiptoggle"><code>.tooltip('toggle')</code></h4>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span>
|
||||
</span></span></code></pre></div><h4 id="tooltiptoggle"><code>.tooltip('toggle')</code></h4>
|
||||
<p>Toggles an element’s tooltip. <strong>Returns to the caller before the tooltip has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.tooltip</code> or <code>hidden.bs.tooltip</code> event occurs). This is considered a “manual” triggering of the tooltip.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span>
|
||||
</code></pre></div><h4 id="tooltipdispose"><code>.tooltip('dispose')</code></h4>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span>
|
||||
</span></span></code></pre></div><h4 id="tooltipdispose"><code>.tooltip('dispose')</code></h4>
|
||||
<p>Hides and destroys an element’s tooltip. Tooltips that use delegation (which are created using <a href="#options">the <code>selector</code> option</a>) cannot be individually destroyed on descendant trigger elements.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'dispose'</span><span class="p">)</span>
|
||||
</code></pre></div><h4 id="tooltipenable"><code>.tooltip('enable')</code></h4>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'dispose'</span><span class="p">)</span>
|
||||
</span></span></code></pre></div><h4 id="tooltipenable"><code>.tooltip('enable')</code></h4>
|
||||
<p>Gives an element’s tooltip the ability to be shown. <strong>Tooltips are enabled by default.</strong></p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'enable'</span><span class="p">)</span>
|
||||
</code></pre></div><h4 id="tooltipdisable"><code>.tooltip('disable')</code></h4>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'enable'</span><span class="p">)</span>
|
||||
</span></span></code></pre></div><h4 id="tooltipdisable"><code>.tooltip('disable')</code></h4>
|
||||
<p>Removes the ability for an element’s tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'disable'</span><span class="p">)</span>
|
||||
</code></pre></div><h4 id="tooltiptoggleenabled"><code>.tooltip('toggleEnabled')</code></h4>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'disable'</span><span class="p">)</span>
|
||||
</span></span></code></pre></div><h4 id="tooltiptoggleenabled"><code>.tooltip('toggleEnabled')</code></h4>
|
||||
<p>Toggles the ability for an element’s tooltip to be shown or hidden.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'toggleEnabled'</span><span class="p">)</span>
|
||||
</code></pre></div><h4 id="tooltipupdate"><code>.tooltip('update')</code></h4>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'toggleEnabled'</span><span class="p">)</span>
|
||||
</span></span></code></pre></div><h4 id="tooltipupdate"><code>.tooltip('update')</code></h4>
|
||||
<p>Updates the position of an element’s tooltip.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'update'</span><span class="p">)</span>
|
||||
</code></pre></div><h3 id="events">Events</h3>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'update'</span><span class="p">)</span>
|
||||
</span></span></code></pre></div><h3 id="events">Events</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -648,10 +648,10 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myTooltip'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.tooltip'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// do something...
|
||||
</span><span class="c1"></span><span class="p">})</span>
|
||||
</code></pre></div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myTooltip'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.tooltip'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// do something...
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span>
|
||||
</span></span></code></pre></div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
@@ -659,7 +659,7 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script>
|
||||
|
||||
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
|
||||
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user