Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Table with the Tooltip | Tables
Test UI Features

bookTable with the Tooltip

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>

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 7. ChapterΒ 2

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you explain how the tooltip works in this table?

What do the different classes like "progress-tooltip-container" and "info-tooltip" do?

Can you describe how the progress bars are implemented in the table?

Awesome!

Completion rate improved to 1.22

bookTable with the Tooltip

Swipe to show menu

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>

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 7. ChapterΒ 2
some-alt