Search code examples
csstooltipbootstrap-5

Bootstrap5 how to adjust the tooltip position when I use the arrtitube text-truncate？

I have a table in the html and I don't want to display the long text in the cell. Therefore I use the css attritube 'text-truncate' to truancate it. Besides, I think I can use the bootstrap tooltip to show the long text, some code snippet is like this:

<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>

It works well except the tooltip display at another cell, like this: enter image description here

The tooltip should appear around the title cell instead of another cell. I think the cause for this problem is the tooltip doesn't know i have trunact the title text and still show in the middle of the whole title text.

So is there any method to solve this problem?

Solution

  • Swap elements: place span inside a tag and add d-inline-block class to a tag, so that span stretches inside a tag, and has truncated text, and triggers tooltip, and clicking on it will trigger modal set in now parent a tag.

    You seem to want to toggle both modal and tooltip, so they should both work.

    Try this (for some reason, tooltips won't work here so I've used JS to initiate them, but it should work without it, and toggle both tooltip and modal):

    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>