How can I customize the tooltip placement in Bootstrap 5 while utilizing the 'text-truncate' attribute?

Question

How can I customize the tooltip placement in Bootstrap 5 while utilizing the 'text-truncate' attribute?

In my HTML table, I have long text in a cell that I don't want to display fully. To truncate the text, I am using the 'text-truncate' CSS attribute. Additionally, I am considering using Bootstrap tooltip to show the full text when needed. Here is an example of the code snippet:

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

While this setup works well, there is an issue where the tooltip displays near another cell instead of the intended one. You can see how it looks here: https://i.sstatic.net/tyvSt.png

The problem seems to be related to the truncation of the text causing the tooltip to display incorrectly. Are there any solutions for this? Any help would be appreciated.

css tooltip bootstrap-5

Answer 1

Answer №1

Rearrange elements: insert span within a tag and include d-inline-block class to the a tag. This will allow the span to expand inside the a tag, display truncated text, activate tooltip, and when clicked, it triggers the modal in the current parent a tag.

You appear to desire toggling both the modal and tooltip for them to function properly together.

Give this a try (tooltip might not work here, so JS is utilized to enable them, but they should toggle both the 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfddd0d0cbcccbcddecfff8a918d918c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

      <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="284a47475c5b5c5a4958681d061a061b">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Answer 2

Rearrange elements: insert span within a tag and include d-inline-block class to the a tag. This will allow the span to expand inside the a tag, display truncated text, activate tooltip, and when clicked, it triggers the modal in the current parent a tag.

You appear to desire toggling both the modal and tooltip for them to function properly together.

Give this a try (tooltip might not work here, so JS is utilized to enable them, but they should toggle both the 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfddd0d0cbcccbcddecfff8a918d918c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

      <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="284a47475c5b5c5a4958681d061a061b">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

How can I customize the tooltip placement in Bootstrap 5 while utilizing the 'text-truncate' attribute?

Answer №1

Similar questions

Field for user input featuring a button to remove the entry

What's the reason for the malfunction of the "required" attribute in my Angular form?

"Enhance User Experience by Keeping Silverlight Tooltips Visible on Mouseover

Tips for aligning the first row of a table with a line of text

External CSS file for Demandware platform

What is the best way to update text in an element when hovering or activating it?

Animated scrolling in Angular

Difficulty arises when collapsed text in Bootstrap clashes with the footer design

Browsing through dual snap points simultaneously on Google Chrome

sliderLighter: keep the slider moving smoothly at a constant speed

Steps for declaring CSS values with fallbacks in case of unsupported values

Part II: Material-UI - Finding the Right Source for CSS Classes

Challenger arises in the realm of Chakra UI styling

What is the best way to design a dynamic menu using HTML, CSS, and jQuery, where each li element gradually disappears?

If an element with a "hidden" display property is loaded in the browser window, will it be visible?

Is there a way to make the header reach the full width of the page?

Learn how to reposition the mat-option easily

Responsive HTML grid with a distinct line separating each row

Personalize the way UIkit tooltips appear

The Bootstrap accordion refuses to expand on a single webpage