Set tooltip text with jQuery

Question

I have the following code:

var text = "";
$.ajax({
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    type: "POST",
    url: DataReview.BASE + "/Encryption/FetchLatestEditBy",
    data: JSON.stringify({
        "ExtendedReport_id": dataRow["ExtendedReport_id"],
        "Report_id": dataRow["Report_id"]
    }),
    success: function (data) {
        text = data.ResultData;
    },
    error: function (data) {
        console.log(data);
    }
});

setTimeout(function () {
    console.log(text); //This displays the value
    $(this).attr('data-toggle', 'tooltip');
    $(this).attr('title', text);
}, 1000);

As you can see, I'm trying to set the tooltip-text in the setTimeout-function. But It will not show up. When I replace text-variable with some dummy-text, it works. But the variable value does not work.

He means a live version or fiddle where you can show the issue. — node_modules, Mar 21 '16 at 15:13
@C0dekid: I don't know how to use fiddle. But it's simple. The value of the text variable Is not shown as a tooltip in the setTimeout-function and I can't understand why. — Bryan, Mar 21 '16 at 15:14
@Bryan but the tooltip is showing anyways? Or nothing displayed? Are you using bootstrap's tooltip? If yes, you need to define the selector: `$('[data-toggle="tooltip"]').tooltip();` — node_modules, Mar 21 '16 at 15:14
@Bryan Man, we need to see the issue for ourselves before we can suggest you something right. Make it in http://jsbin.com? — Praveen Kumar Purushothaman, Mar 21 '16 at 15:17

score 0 · Accepted Answer · answered Mar 21 '16 at 15:19

When you use timeout, the this will be in window scope and not with the element. So you are actually adding attributes to the window.

Secondly there is no guarantee that ajax call will be done or you might be waiting too long after the Ajax call by using a timeout. You should be setting the attributes in the success callback of the Ajax call.

Thirdly you probably need to get trigger the tooltip manually so it gets the updated data.

var elem = $(this);
$.ajax({
    /* your code here, removed to simplify answer*/
    success: function (data) {
        elem.attr('data-toggle', 'tooltip');
        elem.attr('title', text);
        elem.tooltip().tooltip("show"); // might need to change this line based on actual library
    }
});

Thank you for your answer!! :) – Bryan Mar 21 '16 at 15:27 — Bryan, Mar 21 '16 at 15:27

score 0 · Answer 2 · answered Mar 21 '16 at 15:21

I am assuming your ajax success is taking more time and thus the setTimeout function is called first before the "text" variable value is set in the success function. Try calling a function in onsuccess ajax function.

var text = "";
$.ajax({
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    type: "POST",
    url: DataReview.BASE + "/Encryption/FetchLatestEditBy",
    data: JSON.stringify({
        "ExtendedReport_id": dataRow["ExtendedReport_id"],
        "Report_id": dataRow["Report_id"]
    }),
   success: function (data) {
      text = data.ResultData;
      settooltiptext();
   },
   error: function (data) {
       console.log(data);
   }
});

function settooltiptext()
{
    console.log(text); //This displays the value
    $(this).attr('data-toggle', 'tooltip');
    $(this).attr('title', text);
}

Though you're totally right about the timing the comment "this displays the value" indicates it's working in these special circumstances. Otherwise the `console.log` would output the empty string. I think epascarello is closer to the problem pointing out `$(this)` might not be what the OP expects to be. — nuala, Mar 21 '16 at 15:25
makes sense, i totally missed the console.log section. Thanks for pointing it out. — koolhuman, Mar 21 '16 at 15:33

Set tooltip text with jQuery

2 Answers2