Apply datatable tooltip to the datatable cell by jquery- if confliction with jquery-ui appear
Apply datatable tooltip to the datatable cell by jquery- if confliction with jquery-ui appear
we are doing this by pageX and pageY event of jquery.
and in this example we are also excluding last td of the datatable, means we are not implementing tooltip to the last td of the each tr.
css==>
<style>
#tooltip {
position: absolute;
z-index: 1001;
display: none;
border: 2px solid #ebebeb;
border-radius: 5px;
padding: 10px;
color:#fff;
background-color: #e0ae22;
}
#newcasemarktable tbody tr{cursor: pointer;}
</style>
HTML==>
<div class="container">
<div class="col-sm-12">
<div id="tooltip"></div>
<table id="newcasemarktable" class="display" style="width:100%"> put your datatable here
</table>
</div>
</div>
SCRIPT==>
<script type="text/javascript">
$(document).ready(function() {
$('#newcasemarktable').dataTable();
$('#newcasemarktable').on('mousemove', 'tbody tr', function(e) {
var cell=$(e.target).closest('td');
if(cell.index()!= 5 ){
$("#tooltip").text("click to view ").animate({ left: e.pageX, top: e.pageY }, 1)
if (!$("#tooltip").is(':visible')) $("#tooltip").show();
}
})
$('#newcasemarktable').on('mouseleave','tbody tr', function(e) {
$("#tooltip").hide()
})
} );
</script>
Download Sample Code
we are doing this by pageX and pageY event of jquery.
and in this example we are also excluding last td of the datatable, means we are not implementing tooltip to the last td of the each tr.
css==>
<style>
#tooltip {
position: absolute;
z-index: 1001;
display: none;
border: 2px solid #ebebeb;
border-radius: 5px;
padding: 10px;
color:#fff;
background-color: #e0ae22;
}
#newcasemarktable tbody tr{cursor: pointer;}
</style>
HTML==>
<div class="container">
<div class="col-sm-12">
<div id="tooltip"></div>
<table id="newcasemarktable" class="display" style="width:100%"> put your datatable here
</table>
</div>
</div>
SCRIPT==>
<script type="text/javascript">
$(document).ready(function() {
$('#newcasemarktable').dataTable();
$('#newcasemarktable').on('mousemove', 'tbody tr', function(e) {
var cell=$(e.target).closest('td');
if(cell.index()!= 5 ){
$("#tooltip").text("click to view ").animate({ left: e.pageX, top: e.pageY }, 1)
if (!$("#tooltip").is(':visible')) $("#tooltip").show();
}
})
$('#newcasemarktable').on('mouseleave','tbody tr', function(e) {
$("#tooltip").hide()
})
} );
</script>
Download Sample Code
Comments
Post a Comment