Readme

The table cell with a tooltip is structured as follows:

<td>
  <div class="progress-tooltip-container">
    Trustpilot Score
    <span class="info-tooltip">
      <!-- Tooltip trigger element -->
      ⓘ
      <!-- Tooltip content displayed on hover -->
      <span class="info-tooltip-text">
        Customer satisfaction score based on Trustpilot reviews.
      </span>
    </span>
  </div>
</td>

• progress-tooltip-container: A wrapper div to organize the main content (Trustpilot Score) and the tooltip;
• info-tooltip: A span that acts as the tooltip trigger. In this example, it is represented by the "ⓘ" symbol;
• info-tooltip-text: A nested span containing the tooltip's text. This content is displayed when the user hovers over the trigger.

Element

Source Code

<link
  rel="stylesheet"
  href="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/tables-section/table-with-tooltip-styles.css"
/>
<link
  rel="stylesheet"
  href="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/css_custom_styles/TextFormatting.css"
/>
<div class="custom-table-wrapper">
  <table>
    <tbody>
      <tr>
        <th><strong></strong></th>
        <th><strong>Codefinity</strong></th>
        <th><strong>Simplilearn</strong></th>
      </tr>
      <tr>
        <td>
          <div class="progress-tooltip-container">
            Trustpilot Score
            <span class="info-tooltip">
              ⓘ
              <span class="info-tooltip-text">
                Customer satisfaction score based on Trustpilot reviews.
              </span>
            </span>
          </div>
        </td>
        <td>4.6</td>
        <td>4.5</td>
      </tr>
      <tr>
        <td>
          <div class="progress-tooltip-container">
            Suitable For<span class="info-tooltip">
              ⓘ
              <span class="info-tooltip-text">
                Identifies the type of users who benefit the most from the
                platform.
              </span>
            </span>
          </div>
        </td>
        <td>Beginners and career changers</td>
        <td>Professionals, students, and businesses.</td>
      </tr>
      <tr>
        <td>
          <div class="progress-tooltip-container">
            Interface & Usability<span class="info-tooltip"
              >ⓘ<span class="info-tooltip-text"
                >The ease of navigating and using the platform.</span
              ></span
            >
          </div>
        </td>
        <td>
          <div class="progress-wrapper">
            <div class="progress-block filled"></div>
            <div class="progress-block filled"></div>
            <div class="progress-block filled"></div>
            <div class="progress-block filled"></div>
            <div class="progress-block filled"></div>
          </div>
        </td>
        <td>
          <div class="progress-wrapper">
            <div class="progress-block filled"></div>
            <div class="progress-block filled"></div>
            <div class="progress-block filled"></div>
            <div class="progress-block filled"></div>
            <div class="progress-block filled"></div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="progress-tooltip-container">
            Verdict
            <span class="info-tooltip">
              ⓘ<span class="info-tooltip-text">
                A summary of the platform's strengths and focus areas.
              </span>
            </span>
          </div>
        </td>
        <td>
          A fast-growing platform with a strong focus on technical skills and
          ease of learning for new learners.
        </td>
        <td>
          A well-established platform offering a wide range of certifications
          and professional development courses.
        </td>
      </tr>
    </tbody>
  </table>
</div>