Bootstrap5使用arrtitube text-truncate时如何调整tooltip位置？

问题描述 投票：0回答：1

我在 html 中有一个表格，我不想在单元格中显示长文本。因此我使用 css attritube 'text-truncate' 来截断它。此外，我想我可以使用引导工具提示来显示长文本，一些代码片段是这样的：

<td style="cursor: pointer">
              <span
                class="d-inline-block text-truncate"
                style="max-width: 350px"
                data-bs-toggle="modal"
                data-bs-target="#literModal"
                data-pmid="{{ literature.pmid }}"
                data-title="{{ literature.article_title }}"
              >
                <a
                  data-bs-custom-class="custom-tooltip"
                  data-bs-toggle="tooltip"
                  data-bs-placement="bottom"
                  data-bs-title="{{ literature.article_title }}"
                  >{{ literature.article_title | default:"None" }}</a
                >
              </span>
</td>

除了工具提示显示在另一个单元格之外，它运行良好，如下所示：

工具提示应出现在标题单元格周围，而不是其他单元格周围。我认为这个问题的原因是工具提示不知道我已经截断了标题文本并且仍然显示在整个标题文本的中间。

那么有什么方法可以解决这个问题吗？

css tooltip bootstrap-5
1个回答
0
投票

交换元素：将

span
放置在
a
标签内，并将
d-inline-block
类添加到
a
标签中，以便
span
在
a
标签内延伸，并具有截断的文本，并触发工具提示，然后单击它将触发当前父级 
a
标签中设置的模式。

您似乎想同时切换模式和工具提示，因此它们应该都可以工作。

试试这个（由于某种原因，工具提示在这里不起作用，所以我使用 JS 来启动它们，但没有它应该可以工作，并切换工具提示和模态）：

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>


  </head>
  <body>
    <h1>Hello, world!</h1>


<table class="table">
  <thead>
    <tr>
      <th scope="col">PMID</th>
      <th scope="col">Title</th>
      <th scope="col">Abstract</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">8781</td>

<td style="cursor: pointer">
             
                <a
                  data-bs-custom-class="custom-tooltip"
                  data-bs-toggle="tooltip"
                  data-bs-placement="bottom"
                  data-bs-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                  class="d-inline-block "
                  >                
                
                  <span
                  class="d-inline-block text-truncate"
                  style="max-width: 350px"
                  data-bs-toggle="modal"
                  data-bs-target="#literModal"
                  data-pmid="{{ literature.pmid }}"
                  data-title="{{ literature.article_title }}"
                >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </span>
                </a>
              
</td>


      <td>sdfsd</td>
    </tr>
   
  </tbody>
</table>

  
  
  
<!-- Modal -->
<div class="modal fade" id="literModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.