Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Tooltips not working in DataTables


Hello,
Is there a restriction for using tooltips in DataTables? I was testing random json data file with custom JS file which is custom.js. HTML rendered symbol for tooltips as needed but when I hover on blue symbols with first capital letters of name and surname tooltips not

Here is link for you to inspect: http://usubaliev.com/satis/
The issue is in the table with title 'Temin Tarihi Kritik Olan Talepler'


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)


I was searching for tooltips on the web and found an example here: https://bryntum.com/products/grid/examples/celltooltip/

Is it possible to use metronics default tooltips for a symbols inside DT cells?
ps: mine is not working. You can inspect my test page from the link given above.



Hi,

If you are dynamically loading/rendering your datatable rows you should initialize the tooltip for newly loaded rows:


var table = $("#example").DataTable(); 
table.on( "draw", function () {
KTComponents.init();
} );


For more info on the Metronic core components init please refer to this doc page.

if you need any further help please do let us know.

Regards.



Thank you for your reply!
I added the code to my JS code for DT rendering. But tooltips did not initialized, somehow.
I updated link: http://usubaliev.com/satis/ You can test by hovering on name initials at datatable symbols35 at 'Talep Eden' column.

Also you can check JS code here: http://usubaliev.com/satis/assets/js/custom/custom.js



Hi,

I have tested your page and tried to call KTComponents.init() in the console and it worked fine:

<img src="https://i.imgur.com/TgCL1LS.png" class="w-100"/>

Can you please debug your code and make sure that KTComponents.init() is executed after table init?

Regards.



You were right! Thank you, it worked.
I pasted part "KTComponents.init();" from

table.on( "draw", function () {
KTComponents.init();
} ); */

into
"initComplete": function () {
animationContainer.remove();
loadingContainer.classList.add('completed');
KTComponents.init(); //KT tooltips
},

it worked. I already has init. function happy
Have a good day!



Hi happy,

Great! Glad to hear that. If you need any further clarifications please do let us know. All the best with your project

Regards.


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(