javascript - Unique DataTable column header tooltips - Stack Overflow

admin管理员组

文章数量:1403329

I got this code from another question, but my question is how could this code be modified so that each column header can have a custom, unique tooltip? For example, user hovers over Salary and tooltip displays "some text", and when you hover over Start Date, it displays "some different text" ? I assume I would have to change the .each() function to something else, but I'm not too well versed in JavaScript to know how to approach this.

$(document).ready(function() {  
    var table = $('#example').DataTable( {     
        "ajax": '',
        "initComplete": function(settings){
            $('#example thead th').each(function () {
               var $td = $(this);
               $td.attr('title', $td.text());
            });

            /* Apply the tooltips */
            $('#example thead th[title]').tooltip(
            {
               "container": 'body'
            });          
        }  
    }); 
});

<link href="//cdn.datatables/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src=".11.3/jquery.min.js"></script> 
<script src="//cdn.datatables/1.10.7/js/jquery.dataTables.min.js"></script>

<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href=".3.5/css/bootstrap.min.css">

<!-- Latest piled and minified JavaScript -->
<script src=".3.5/js/bootstrap.min.js"></script> 

<table id="example" class="display">
<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
        <th>Start Date</th>
    </tr>
</thead>

<tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
        <th>Start Date</th>      
    </tr>
</tfoot>
</table>

I got this code from another question, but my question is how could this code be modified so that each column header can have a custom, unique tooltip? For example, user hovers over Salary and tooltip displays "some text", and when you hover over Start Date, it displays "some different text" ? I assume I would have to change the .each() function to something else, but I'm not too well versed in JavaScript to know how to approach this.

$(document).ready(function() {  
    var table = $('#example').DataTable( {     
        "ajax": 'https://api.myjson./bins/qgcu',
        "initComplete": function(settings){
            $('#example thead th').each(function () {
               var $td = $(this);
               $td.attr('title', $td.text());
            });

            /* Apply the tooltips */
            $('#example thead th[title]').tooltip(
            {
               "container": 'body'
            });          
        }  
    }); 
});

<link href="//cdn.datatables/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="//cdn.datatables/1.10.7/js/jquery.dataTables.min.js"></script>

<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Latest piled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script> 

<table id="example" class="display">
<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
        <th>Start Date</th>
    </tr>
</thead>

<tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
        <th>Start Date</th>      
    </tr>
</tfoot>
</table>

• javascript
• jquery
• datatables

Share Improve this question Follow asked Aug 17, 2018 at 9:55 Kyle WeiseKyle Weise 88911 gold badge99 silver badges3333 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Yes, You are almost on the way.

This .each function $('#example thead th').each(function () { is used to set the title(ToolTip) of header.

There are number of ways to do this.

1. In this .each function you can check the header text and then can decide your custom text.

Here is the code snippet:

$(document).ready(function() {  
    var table = $('#example').DataTable( {     
        "ajax": 'https://api.myjson./bins/qgcu',
        "initComplete": function(settings){
            $('#example thead th').each(function () {
               var $td = $(this);
               var headerText = $td.text(); 
               var headerTitle=$td.text(); 
        if ( headerText == "Name" )
            headerTitle =  "custom Name";
        else if (headerText == "Position" )
            headerTitle = "custom Position";
        else if ( headerText == "Office" )
             headerTitle =  "custom Office";
        else if ( headerText == "Salary" )
             headerTitle =  "custom Salary";
        else if ( headerText == "Start Date" )
             headerTitle =  "custom Start Date";
               $td.attr('title', headerTitle);
            });

            /* Apply the tooltips */
            $('#example thead th[title]').tooltip(
            {
               "container": 'body'
            });          
        }  
    }); 
});

<link href="//cdn.datatables/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="//cdn.datatables/1.10.7/js/jquery.dataTables.min.js"></script>

<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Latest piled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script> 

<table id="example" class="display">
<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
        <th>Start Date</th>
    </tr>
</thead>

<tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
        <th>Start Date</th>      
    </tr>
</tfoot>
</table>

2. Set the custom title attribute as a header attribute and .each function you can get custom title attribute and set as title(ToolTip) of header.

Here is the code snippet:

$(document).ready(function() {  
    var table = $('#example').DataTable( {     
        "ajax": 'https://api.myjson./bins/qgcu',
        "initComplete": function(settings){
            $('#example thead th').each(function () {
               var $td = $(this);
              $td.attr('title', $td.attr('custom-title'));
            });

            /* Apply the tooltips */
            $('#example thead th[title]').tooltip(
            {
               "container": 'body'
               
            });          
        }  
    }); 
});

<link href="//cdn.datatables/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="//cdn.datatables/1.10.7/js/jquery.dataTables.min.js"></script>

<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Latest piled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script> 

<table id="example" class="display">
<thead>
    <tr>
        <th custom-title="custom Name">Name</th>
        <th custom-title="custom Position">Position</th>
        <th custom-title="custom Office">Office</th>
        <th custom-title="custom Salary">Salary</th>
        <th custom-title="custom Start Date">Start Date</th>
    </tr>
</thead>

<tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
        <th>Start Date</th>      
    </tr>
</tfoot>
</table>

本文标签： javascriptUnique DataTable column header tooltipsStack Overflow