javascript 引导工具提示不适用于引导图标

zzoitvuj 于 2023-03-06 发布在 Java

关注(0)|答案(1)|浏览(101)

我正在尝试使用引导图标的引导工具提示，这是我的代码：

<body>
            <script>
                const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
                const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
            </script>
            <p>File uploaded successfully</p>
            <p>File Name: {{name}}</p>
            <p>Total Values: {{i}}</p>
            <table class="styled-table">
                <thead>
                    <tr>
                    <th>Key</th>
                    <th>Value</th>
                    </tr>
                </thead>
                <tbody>
                    {% for key, value in items %}
                    {% if key in desired_key %}
                        {% if key in result %}
                        <tr>
                            <td>{{ key }}
                                <i class="bi bi-info-circle" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top" >
                                </i>
                            </td>
                            <td>
                            <table class="inner-table">
                                {% for k, v in result[key].items() %}
                                <tr>
                                    <td>{{ k }}</td>
                                    <td>{{ v }}</td>
                                </tr>
                                {% endfor %}
                            </table>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td >{{ key }} 
                                <i class="bi bi-info-circle">
                                </i>
                            </td>
                            <td>{{ value }}</td>
                        </tr>
                        {% endif %}
                    {% endif %}
                    {% endfor %}
                </tbody>
            </table>
            
            <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
        </body>

我也有头部标签的链接：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" />

body标签中的脚本可以在Bootstrap网站上找到，有人知道为什么它不工作吗？
任何帮助都将不胜感激。有几个问题有类似的要求，但都没有帮助。

JavaScript

来源：https://stackoverflow.com/questions/75624552/bootstrap-tooltip-not-working-with-bootstrap-icon

1条答案

按热度按时间

wqsoz72f1#

脚本在解析内容之前运行，因此通过将其 Package 在侦听器中，在解析所有内容 * 之后 * 运行它。

<script>

addEventListener('DOMContentLoaded', (event) => {

    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

});

</script>

编辑纯示例：

<body>
  <script>
    addEventListener('DOMContentLoaded', (event) => {

      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

    });
  </script>

  <p>File uploaded successfully</p>
  <p>File Name: {{name}}</p>
  <p>Total Values: {{i}}</p>
  <table class="styled-table">
    <thead>
      <tr>
        <th>Key</th>
        <th>Value</th>
      </tr>
    </thead>
    <tbody>
      {% for key, value in items %} {% if key in desired_key %} {% if key in result %}
      <tr>
        <td>{{ key }}
          <i class="bi bi-info-circle" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
                                </i>
        </td>
        <td>
          <table class="inner-table">
            {% for k, v in result[key].items() %}
            <tr>
              <td>{{ k }}</td>
              <td>{{ v }}</td>
            </tr>
            {% endfor %}
          </table>
        </td>
      </tr>
      {% else %}
      <tr>
        <td>{{ key }}
          <i class="bi bi-info-circle">
                                </i>
        </td>
        <td>{{ value }}</td>
      </tr>
      {% endif %} {% endif %} {% endfor %}
    </tbody>
  </table>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" />
</body>

赞(0）回复(0）举报 2023-03-06

我来回答

javascript 引导工具提示不适用于引导图标

1条答案

相关问题

热门标签

最新问答