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

Question

我有一个使用 datatables 构建的动态表。如何在元素上设置鼠标悬停文本？我希望每一列都有不同的文本，对于第一列，我希望每一行 ID 都有不同的文本，文本来 self 的 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 :

<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>