鼠标悬停在带有数据表的文本上

Question

我有一个用datatables构建的动态表。 如何将鼠标悬停在元素上的文本上？ 我想为每一列设置不同的文本，对于第一列，我想为每个行 ID 设置不同的文本，这些文本来自我的php json文件。

我的js代码：

$(document).ready(function() {
    $('#doentes').DataTable({
     "ajax" :  "functions/getDiagnosticoGeral.php",

     "columns" : [ 
     {
      "data" : "id"
 }, {
      "data" : "abandonos"
 }, {
      "data" : "canal_1"
 }, {
      "data" : "dif_1"
 }, {
      "data" : "venda_1"
 }, {
      "data" : "dif_preco_1"
 }, {
      "data" : "canal_2"
 }, {
      "data" : "dif_2"
 }, {
      "data" : "venda_2"
 }, {
      "data" : "dif_preco_2"
 }, {
      "data" : "canal_3"
 }, {
      "data" : "dif_3"
 }, {
      "data" : "venda_3"
 }, {
      "data" : "dif_preco_3"
 }, {
      "data" : "dif_views"
 }, {
      "data" : "dif_frete_sp"
 }, {
      "data" : "dif_frete_rj"
 }, {
      "data" : "dif_frete_mg"
 }, {
      "data" : "dif_frete_pr"
 }, {
      "data" : "dif_frete_rs"
 }, {
      "data" : "dif_prazo_sp"
 }, {
      "data" : "dif_prazo_rj"
 }, {
      "data" : "dif_prazo_mg"
 }, {
      "data" : "dif_prazo_pr"
 }, {
      "data" : "dif_prazo_rs"
 }, {
      "data" : "requisicoes_cnova"
 }, {
      "data" : "requisicoes_b2w"
 }, {
      "data" : "requisicoes_walmart"
 }, {
      "data" : "requisicoes_shopfacil"
 }, {
      "data" : "requisicoes_magazine"
 }, {
      "data" : "nota"
 }, {
      "data" : "tipo"
 }, {
      "data" : "janela"
 }],

 "scrollX": true,

 "orderFixed": [[ 31, "asc"],[ 32, "asc"],[ 2, "asc"],[ 3, "desc" ]]
});                
});

我的桌子：

<table id="doentes" class="table table-striped table-hover">
                      <thead>
                        <tr>
                          <th>Id</th>
                          <th>Abandonos</th>
                          <th>Canal 1</th>
                          <th>Pedidos</th>
                          <th>Venda</th>
                          <th>Preço</th>
                          <th>Canal 2</th>
                          <th>Pedidos</th>
                          <th>Venda</th>
                          <th>Preço</th>
                          <th>Canal 3</th>
                          <th>Pedidos</th>
                          <th>Venda</th>
                          <th>Preço</th>
                          <th>Views</th>
                          <th>Frete SP</th>
                          <th>Frete RJ</th>
                          <th>Frete MG</th>
                          <th>Frete PR</th>
                          <th>Frete RS</th>
                          <th>Prazo SP</th>
                          <th>Prazo RJ</th>
                          <th>Prazo MG</th>
                          <th>Prazo PR</th>
                          <th>Prazo RS</th>
                          <th>Req CNova</th>
                          <th>Req B2W</th>
                          <th>Req Walmart</th>
                          <th>Req Shopfacil</th>
                          <th>Req Magazine</th>
                          <th>Nota</th>
                          <th>Tipo</th>
                          <th>Janela</th>
                        </tr>
                      </thead>
                      <tbody>
                         <tr>
                          <th>Id</th>
                          <th>Abandonos</th>
                          <th>Canal 1</th>
                          <th>Pedidos</th>
                          <th>Venda</th>
                          <th>Preço</th>
                          <th>Canal 2</th>
                          <th>Pedidos</th>
                          <th>Venda</th>
                          <th>Preço</th>
                          <th>Canal 3</th>
                          <th>Pedidos</th>
                          <th>Venda</th>
                          <th>Preço</th>
                          <th>Views</th>
                          <th>Frete SP</th>
                          <th>Frete RJ</th>
                          <th>Frete MG</th>
                          <th>Frete PR</th>
                          <th>Frete RS</th>
                          <th>Prazo SP</th>
                          <th>Prazo RJ</th>
                          <th>Prazo MG</th>
                          <th>Prazo PR</th>
                          <th>Prazo RS</th>
                          <th>Req CNova</th>
                          <th>Req B2W</th>
                          <th>Req Walmart</th>
                          <th>Req Shopfacil</th>
                          <th>Req Magazine</th>
                          <th>Nota</th>
                          <th>Tipo</th>
                          <th>Janela</th>
                         </tr>
                      </tbody>
                    </table>

我尝试了一些类似问题的解决方案，但似乎都不适合我。

Answer 1

如果我理解正确，您希望在每个单元格悬停时都有某种工具提示。 为此，您需要将单元格内容更改为允许预览标题的 html 元素。 例如，单元格 Abandonos 的内容应该是这样的：

<th><span title='The title you wish to show on hover'>Abandonos</span></th>

Answer 2

您需要在 css3 中与孩子一起工作。 这是您可以很好地学习方法的链接https://www.w3schools.com/css/css_pseudo_classes.asp

Answer 3

我所做的是在悬停时直接在单元格上显示额外的文本：我使用数据属性而不是标题，但您可以对标题属性执行相同操作，我将额外的文本放在我的属性上

 $(document).ready(function () { $('#example').DataTable(); });

 .rcDescription_datatable{ cursor: pointer; } .yavuz_Description_datatable:hover{ color: blue; font-style: italic; } .yavuz_Description_datatable:hover:after{ content:attr(data-restOfDesc); color: blue; font-style: italic; }

 <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script> <link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet"/> <table id="example" class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>Yavuzcan</td> <td><span class="yavuz_Description_datatable" data-restOfDesc="sur le principe du wiki. Ce projet vise à offrir un contenu librement réutilisable, objectif et vérifiable, que chacun peut modifier et améliorer.">Wikipédia est un projet d'encyclopédie collective en ligne, universelle, multilingue et fonctionnant</span></td> </tr> <tr> <td>Nicolas</td> <td><span class="yavuz_Description_datatable" data-restOfDesc="my text that continues">My main text goes to here and if you hover it extra text will be shown </span></td> </tr> </tbody> </table>