نمایش Tooltip یا توضیحات با قرار دادن ماوس روی جدول Html

پاسخ هوش مصنوعی

برای نمایش Tooltips در HTML، می توانید از ویژگی title استفاده کنید یا از CSS و JavaScript برای طراحی بهتر Tooltip استفاده کنید. در اینجا یک مثال ساده از هر دو روش آورده شده است.

روش 1: استفاده از ویژگی title

    

        
ردیف 1، سلول 1
        
ردیف 1، سلول 2
    
    

        
ردیف 2، سلول 1
        
ردیف 2، سلول 2
    

روش 2: استفاده از CSS و JavaScript برای Tooltip سفارشی

    

        
ردیف 1، سلول 1
            توضیحات برای ردیف 1، سلول 1
        
        
ردیف 1، سلول 2
            توضیحات برای ردیف 1، سلول 2
        
    
    

        
ردیف 2، سلول 1
            توضیحات برای ردیف 2، سلول 1
        
        
ردیف 2، سلول 2
            توضیحات برای ردیف 2، سلول 2
        
    

نمایش توضیحات یا Tooltip در سلولهای جدول html

شما می تونید از خاصیت title در سلولهای جدول استفاده کنید. با استفاده از این خاصیت وقتی ماوس رو روی اون سلول می برید متن مورد نظر شما نمایش داده میشه.

<td title='توضیحات'></td>

در مثال بالا اگر روی سلول مورد نظر ماوس رو نگه داریم متن مورد نظر نمایش داده میشه.

<table>
   <thead>
      <tr>
         <th>ردیف</th>
         <th>نام مشتری</th>
      </tr>
   </thead>
   <tbody>
      @foreach (var item in Model)
      {
         <tr>
            <td>@counter</td>
            <td title='@item.CustomerTel'>@item.CustomerName</td>
          </tr>
          counter++;
      }
   <tbody>
</table>

یا مثلا در کد بالا وقتی روی ستون نام مشتری مارس رو نگه داریم شماره تماس هر مشتری (CustomerTel) نمایش داده میشه.