# Readme
The table cell with a tooltip is structured as follows:
```html
<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>
```
- `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.

# Source Code
```html
<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>
```

This section contains a variety of buttons, each designed to perform a specific function.

This section provides auxiliary tools that support content formatting and data manipulation.

This section contains additional features and tools designed to provide enhanced functionality.

This section contains various text box elements.

Please don't use any elements from this section, as it doesn't provide any value for the content development. Thank you!

Please note that the elements in this section are deprecated and no longer recommended for use. It would be best to avoid using them moving forward. Thank you!

Test UI Features

Table with the Tooltip

Readme

Element

Source Code