Howdy, Stranger!

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

Multiple Tooltips come up

I'm using reporting software that creates asp reports from a database.
On the cross tab report, the element I want to apply tipped to has the same class name(ewRptGrpField4) all the way down the report. The only thing different is the name in the field.
An example can be seen here
http://www.ready4data.com/Documents/Snap3.jpg
The data-class(tpx1_rptTrainingMatrixPathProgress2016_Tech) is also the same for each Tech element.

The tipped code I'm using is below. What happens when the 2nd and subsequent elements are hovered over, I get multiple tooltips which have the previous elements data. Its like its looping through all the tipped rows in the report.
window.onmouseover = function(e) {
var elm = e.target;
if (elm.tagName=="TD" && elm.className=="ewRptGrpField4") {
var employeeName = elm.innerText
Tipped.create('.ewRptGrpField4', {
ajax: {
url:'ajaxCertRenewalLookup.asp',
type:'GET',
data:{strEmployee:employeeName},
success:function(msg) {return msg;},
},
showOn: 'focus mouseover',
skin: 'gray'
});
}
}
Do you have any suggestions on overcoming this issue.
Scott

Comments

  • edited June 2016

    You're creating the tooltip on mouseover for every element with the same class, don't do that. Loop over the elements you need after the DOM loads and create individual tooltips, you can use jQuery for that:

    $(document).ready(function() {
      $('td.ewRptGrpField4').each(function(i, element) {
        Tipped.create(element, {
          ajax: {
            url: 'ajaxCertRenewalLookup.asp',
            type: 'GET',
            data: { strEmployee: $(element).text() },
            success: function(msg) { return msg; },
          },
          showOn: 'focus mouseover',
          skin: 'gray'
        });
      });
    });
    
  • Nick,
    Thanks for the solution. Maybe just the way the generated report works, I had to change
    data: { strEmployee: $(element).text() }, to
    data: { strEmployee: $(element).text().replace(/(\r\n|\n|\r)/gm,'') },
    so it would remove the leading %0A at the beginning of each Tech name.
    The .text() string was returning %0ARogers%2C+Mister

    Still fumbling my way through javascript but your product has made things easier.
    Scott

Sign In or Register to comment.