css 如何设置数据表格工具提示的样式？

w3nuxt5m 于 2023-03-09 发布在其他

关注(0)|答案(1)|浏览(113)

我正在使用数据表为我的项目，我正在使用隐藏列来显示工具提示。有没有一种方法，我可以样式他们？也许添加一些动画。现在，工具提示看起来默认。我想让它有趣的用户。这是我的代码。谢谢。

https://live.datatables.net/lerapaho/1/edit

$(document).ready(function() {
  var table = $('#example').DataTable({
    responsive: false,
paging: false,
scrollX: true,
scrollCollapse: true,
lengthChange: false,
searching: true,
ordering: false,
columnDefs: [{
      targets: 2, visible: false
    }],
    rowCallback: function(row, data, displayNum, displayIndex, dataIndex) {
      $(row).attr('title', data[2]);
    }
} );
} );

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>

  <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;"><thead>
<tr>

<th>&#160;</th>
<th>&#160;</th>
<th>&#160;</th>
<th colspan="3" style=" text-align: center;">Information</th>
  <th>&#160;</th>
</tr>

          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Hidden Column</th>
          </tr>
        </thead>

        
        <tbody>
          <tr>
            <td>ID.AI</td>
            <td><p>System: Architectghhghjjkjukjkj<p></td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>Sys Architect</td>
          </tr>
          <tr>
            <td>Garrett -2</td>
            <td><p>Director: fgghghjhjhjhkjkj<p></td>
            <td>Edinburgh</td>
            <td></td>
            <td>2011/07/25</td>
            <td>$5,300</td>
            <td>Director:</td>
          </tr>
          <tr>
            <td>Ashton.1 -2</td>
            <td><p>Technical Authorjkjkjk fdfd h gjjjhjhk<p></td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
            <td></td>
          </tr>
          
            
          </tr></tbody></table>
</div>

css

来源：https://stackoverflow.com/questions/75678888/how-do-i-style-datatable-tooltips

1条答案

按热度按时间

ubof19bj1#

就像Adam上面说的，你不能在HTML中设置title属性的默认行为，你可以做的是实现类似Bootstrap的工具提示，看起来像这样：

$(document).ready(function() {
  $('#my-table').DataTable({
    // ...
    createdRow: function(row, data, dataIndex) {
      var title = data[2];
      $(row).attr('title', title);

      if (title !== undefined && title !== '') {
        $(row).find('td').each(function(index, td) {
          $(td).attr('data-toggle', 'tooltip');
          $(td).attr('data-placement', 'top');
        });
      }
    },

    drawCallback: function() {
      $('[data-toggle="tooltip"]').tooltip();
    }
  });
});

赞(0）回复(0）举报 2023-03-09

我来回答

css 如何设置数据表格工具提示的样式？

1条答案

相关问题

热门标签

最新问答