There is an error in the usage instructions provided by the document *tooltip*
Created by: y377
Prerequisites
-
I have searched for duplicate or closed issues -
I have validated any HTML to avoid common problems -
I have read the contributing guidelines
Describe the issue
wrong description context :
When there are multiple places on the page that need tooltips, if you use data-bs-title="...", only the title will be displayed at the first place. Then I checked Google and found no answer. When I When I was about to give up, I checked W3C, according to their usage, use title="...". All titles can be displayed, I guess it's a documentation error!
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
Tooltip on top
</button>Reduced test cases
---
layout: default
title: 1
pagination:
enabled: true
---
<div class="container">
{% for post in paginator.posts %}
<blockquote class="border-start border-2 border-info shadow bg-body rounded-bottom ">
<a class="fs-5 btn btn-outline-dark border border-0 " href="{{ post.url }}">{{ post.title }}</a>
<i class="bi bi-alarm text-success" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ post.date | date: '%F' }}"> </i>
<button type="button" class="btn btn-none" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ post.author | upcase }}">
<i class="bi bi-person-circle"></i>
</button>
<ul class="list-unstyled p-4 bg-light bg-gradient">
<li class="">{{ post.excerpt | strip_html | truncate: 100 }}</li>
</ul>
</blockquote>
{% endfor %}
</div>
{% if paginator.total_pages > 1 %}
<ul>
{% if paginator.previous_page %}
<li>
<a href="{{ paginator.previous_page_path | prepend: site.baseurl }}">Newer</a>
</li>
{% endif %}
{% if paginator.next_page %}
<li>
<a href="{{ paginator.next_page_path | prepend: site.baseurl }}">Older</a>
</li>
{% endif %}
</ul>
{% endif %}
<script type="text/javascript">
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl,{delay: { "show": 500, "hide": 100 }}))
</script>What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome, Microsoft Edge
What version of Bootstrap are you using?
v5.2.2