datatable html tooltip behavior

edited July 2019 in Technical questions

Hi, i am using a tooltip to show an image on a datatable, but i am getting different results.

On Internet Explorer or Edge:

On Chrome:

The IE or Edge behavior is what i am expecting, but why that difference on chrome?

This is how i am creating the tooltip on the datatable column:

tooltip: function (obj) {
return "< div >< img src=" + + " / >< / div >< div >" + obj.descrizione + "</ div >";

Is there a way to force the positioning of the tooltip?



  • Hey @AndreaC, I'm not really sure why you're having the issue in your particular case, as the tooltip positioning seems to be the same for me on different browsers, for example: Could you please notify me of your results with this snippet using different browsers?

    That said, you can indeed change the positioning of your tooltip by offsetting its position relative to the cursor by using dx/dy properties for horizontal/vertical offset respectively. Here's an example:

  • Hi @Dzmitry, thank you for your answer, with your snippet i have the same results on different browsers.

    Maybe the problem is that, in my case, i check if the image exist before to return the tooltip.

    The complete function I used for the tooltip is like this:

    tooltip: function (obj) {

    var img = false;

    async: false,
    type: 'GET',
    }).done(function () {
    img = true;

    if (img)
    return "< div >< img src=" + + " / >< / div >< div >" + obj.descrizione + "</ div >";
    return obj.descrizione;


    I use the $.ajax to check if the image exist.
    Maybe, like this, chrome is not able to calculate the img height before the tooltip is shown, and that's why it is shown in the wrong position?
    This is just my guess tho.

    For now, i solved my problem adding syle='height:200px;' on the img tag.

    Like this it works fine on chrome too.

    It would be interesting to understand why the different results without forcing the img height tho.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!