mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-11 18:02:28 +03:00
Code Activity

Refactor some docs examples CSS (#36194)

Browse Source 
* Fix some more borders and margins

* Flex utilities docs: remove .bd-highlight class from snippets

* Explicit close target

* Reorder to keep base class up top

* Fix custom position example

* Tooltips: add code snippet, use scss-docs ref for custom tooltip

* Tweak text for pagination examples

* Modals: move custom styles to utilities

* Grid docs: Combine selectors and share coloring

* Refactor tons of little things
This commit is contained in:
Mark Otto
2022-04-19 11:21:43 -07:00
committed by GitHub
parent 9ec51f4499
commit e089aef00f
8 changed files with 378 additions and 415 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.1/components/tooltips.md
+6 -9
View File
@@ -47,10 +47,10 @@ var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
Hover over the links below to see tooltips:
<div class="bd-example tooltip-demo">
<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-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-bs-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-bs-toggle="tooltip" title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" title="The last tip!">your own</a> site or project.
</p>
</div>
{{< example class="tooltip-demo" >}}
<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-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-bs-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-bs-toggle="tooltip" title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" title="The last tip!">your own</a> site or project.
</p>
{{< /example >}}
### Custom tooltips
@@ -58,11 +58,8 @@ Hover over the links below to see tooltips:
You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable.
```scss
.custom-tooltip {
--bs-tooltip-bg: var(--bs-primary);
}
```
{{< scss-docs name="custom-tooltip" file="site/assets/scss/_component-examples.scss" >}}
{{< example class="tooltip-demo" >}}
<button type="button" class="btn btn-secondary"