How can I align my bootrap tooltip to the front in bootstrap datatables with horizontal scroll?

Asked Feb 15 '19 at 15:29

Active Feb 15 '19 at 15:29

Viewed 252 times

I am using bootstrap tooltip inside my datatable. It worked well until I added scrollX:true. Since I did that, my tootip is covered by the table, I cannot make it visible, although I added data-container="body":

  var table = $('.table').DataTable({
    "scrollX": true,
    "columnDefs": [
      {"render": function (data, type, row) {
         return '<p data-toggle="tooltip" data-placement="top" data-containter="body" title="edit" >edit</p>';
      }
  ],
....

asked Feb 15 '19 at 15:29

peace_love

6,229
11
69
157

is there a chance, tooltip's z-index is less than of scrollable DataTable? – Feb 15 '19 at 15:47
@ygorbunkov how can I change tooltips z-index – peace_love Feb 15 '19 at 16:02
right off the top of my head, if you include your own css for your custom elements, you may put there necessary section (with proper selector, that matches your tooltip) to override previous values. Of course, if it's loaded **after** the rest of stylesheets. – Feb 15 '19 at 16:09
Do you mean `.tooltip: z-index:9999999` Like this? – peace_love Feb 15 '19 at 16:32
Cannot replicate this, can you create a fiddle or similar that reproduces the behaviour? – davidkonrad Feb 15 '19 at 21:27
1

@Jarla I wonder could it be your typo (data-containter="body") instead of data-container="body"? – TrojanName Feb 17 '19 at 13:49
@TrojanName OMG it was the type :((( Sorry, I did not see this! – peace_love Feb 18 '19 at 09:54
1

@Jarla Happy to help! – TrojanName Feb 18 '19 at 13:56

How can I align my bootrap tooltip to the front in bootstrap datatables with horizontal scroll?

0 Answers0