Image in a ToolTip Over all Rows

zgoforth

Link to test case: http://jsfiddle.net/BeerusDev/x054hvt3/28/

Hello,

I am pulling an Image via Rest API and all it grabs is the image url, which is fine. I am trying to append it to the tooltip so it shows on hover, but all it shows is the url? I have tried a different method which is commented out in my fiddle, but then nothing pops up at all? Is there a way to accomplish this?

kthorngren

I would try displaying the tooltip with the image in a simple test web page without Datatables. Once you get it working you should be able to transfer the code into your columns.render. There is nothing within Datatables to help with displaying tooltips. You just need to workout the proper HTML. Maybe this techtip will help:
https://www.scriptol.com/css/tooltip.php

Kevin

zgoforth

I followed the techtip. And the code worked, but as soon as I try to implement it into my columnDefs render function, the image is automatically over the table? http://jsfiddle.net/BeerusDev/x054hvt3/47/

kthorngren

Something doesn't look correct in the string your are returning in columns.render as compared to the techtip. For example you just have tooltip instead of class="tooltip". Make sure the string is correct. If you still need help please update your example with the working tooltip outside of Datatables so we can compare.

Kevin

zgoforth

I fixed the string in my example linked above located here: http://jsfiddle.net/BeerusDev/x054hvt3/53/

Here is the working tooltip outside of DataTables: https://jsfiddle.net/BeerusDev/91ny72wd/4/

The only difference is the text "Hover Over Me" which shouldn't be in the returned string of columnDefs.render since the row is actually what is getting hovered over

kthorngren

Since you are using bootstrap 3 the technique in the techtip may not work. I believe Bootstrap uses a different technique for tooltips. This is BS 4 documentation but it might work with BS 3:
https://getbootstrap.com/docs/4.1/components/tooltips/

See the last example in this thread for one way to use BS 4 tooltips with Datatables. This SO thread might help with displaying the image in the tooltip.

Kevin