mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-31 00:59:51 +02:00
Add v5.2.1 docs (#37099)
This commit is contained in:
XhmikosR
GitHub
@@ -18,7 +18,7 @@
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
|
||||
|
||||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
|
||||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -31,23 +31,21 @@
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#712cf9">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Tooltips">
|
||||
<meta name="twitter:description" content="Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
<meta name="twitter:image" content="/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.2/components/tooltips/">
|
||||
<meta property="og:title" content="Tooltips">
|
||||
<meta property="og:description" content="Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
<meta property="og:image" content="/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
|
||||
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
|
||||
|
||||
@@ -145,6 +143,7 @@
|
||||
|
||||
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
|
||||
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
<div class="bd-navbar-toggle">
|
||||
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
@@ -152,14 +151,21 @@
|
||||
|
||||
<span class="d-none fs-6 pe-1">Browse</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
||||
</button>
|
||||
<div class="d-flex">
|
||||
|
||||
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
|
||||
|
||||
|
||||
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
|
||||
<div class="offcanvas-header px-4 pb-0">
|
||||
@@ -189,12 +195,6 @@
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
@@ -218,7 +218,7 @@
|
||||
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
|
||||
<hr class="d-lg-none text-white-50">
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
@@ -254,7 +254,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
|
||||
@@ -480,7 +480,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
|
||||
On this page
|
||||
@@ -523,15 +523,15 @@
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
|
||||
<h2 id="overview">Overview <a class="anchor-link" href="#overview" aria-label="Link to this section: Overview"></a></h2>
|
||||
<p>Things to know when using the tooltip plugin:</p>
|
||||
<ul>
|
||||
<li>Tooltips rely on the third party library <a href="https://popper.js.org/">Popper</a> for positioning. You must include <a href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js">popper.min.js</a> before <code>bootstrap.js</code>, or use one <code>bootstrap.bundle.min.js</code> which contains Popper.</li>
|
||||
<li>Tooltips rely on the third party library <a href="https://popper.js.org/">Popper</a> for positioning. You must include <a href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">popper.min.js</a> before <code>bootstrap.js</code>, or use one <code>bootstrap.bundle.min.js</code> which contains Popper.</li>
|
||||
<li>Tooltips are opt-in for performance reasons, so <strong>you must initialize them yourself</strong>.</li>
|
||||
<li>Tooltips with zero-length titles are never displayed.</li>
|
||||
<li>Specify <code>container: 'body'</code> to avoid rendering problems in more complex components (like our input groups, button groups, etc).</li>
|
||||
@@ -761,7 +761,7 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
|
||||
<td><code>animation</code></td>
|
||||
<td>boolean</td>
|
||||
<td><code>true</code></td>
|
||||
<td>Apply a CSS fade transition to the tooltip</td>
|
||||
<td>Apply a CSS fade transition to the tooltip.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>boundary</code></td>
|
||||
@@ -789,9 +789,9 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>fallbackPlacements</code></td>
|
||||
<td>string, array</td>
|
||||
<td>array</td>
|
||||
<td><code>['top', 'right', 'bottom', 'left']</code></td>
|
||||
<td>Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper’s [behavior docs](<a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements">https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements</a>.</td>
|
||||
<td>Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper’s <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements">behavior docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>html</code></td>
|
||||
@@ -801,7 +801,7 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>offset</code></td>
|
||||
<td>number, string, function</td>
|
||||
<td>array, string, function</td>
|
||||
<td><code>[0, 0]</code></td>
|
||||
<td>Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: <code>data-bs-offset="10,20"</code>. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: <a href="https://popper.js.org/docs/v2/modifiers/offset/#skidding-1">skidding</a>, <a href="https://popper.js.org/docs/v2/modifiers/offset/#distance-1">distance</a>. For more information refer to Popper’s <a href="https://popper.js.org/docs/v2/modifiers/offset/#options">offset docs</a>.</td>
|
||||
</tr>
|
||||
@@ -899,11 +899,11 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>getInstance</code></td>
|
||||
<td><em>Static</em> method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn’t initialized</td>
|
||||
<td><em>Static</em> method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn’t initialized.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>getOrCreateInstance</code></td>
|
||||
<td><em>Static</em> method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn’t initialized</td>
|
||||
<td><em>Static</em> method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn’t initialized.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>hide</code></td>
|
||||
@@ -997,7 +997,7 @@ The <code>setContent</code> method accepts an <code>object</code> argument, wher
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.2.0.</li>
|
||||
<li class="mb-2">Currently v5.2.1.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -1046,7 +1046,7 @@ The <code>setContent</code> method accepts an <code>object</code> argument, wher
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
@@ -1055,12 +1055,12 @@ The <code>setContent</code> method accepts an <code>object</code> argument, wher
|
||||
<script src="/docs/5.2/assets/js/docs.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
document.querySelectorAll('.btn-edit').forEach(btn => {
|
||||
btn.addEventListener('click', event => {
|
||||
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
|
||||
|
||||
|
||||
|
||||
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
|
||||
|
||||
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
|
||||
@@ -1074,10 +1074,10 @@ The <code>setContent</code> method accepts an <code>object</code> argument, wher
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||||
<title>Bootstrap Example</title>
|
||||
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.1\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
</head>
|
||||
<body class="p-3 m-0 border-0 ${classes}">
|
||||
|
||||
@@ -1104,7 +1104,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="position-fixed"><input type="text" tabindex="-1"></div>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user