I have the following code set up in my project as an alert that triggers when the user clicks on a div. The divs are horizontal bar graph elements, each corresponding to a particular measurement. The alert pops up with a bunch of info on those measurements.
$(document).on('click', '.state-entry', function () {
var startDate = $('#datepicker').datepicker('getDate');
var duration = seconds2time(Math.round($(this).data('duration') * 86400));
startDate.setSeconds(86400 * $(this).data('start'));
var endDate = $('#datepicker').datepicker('getDate');
endDate.setSeconds(Math.round(86400 * $(this).data('start') + $(this).data('duration') * 86400));
alert($(this).data('resource') + ' changed state to ' + $(this).data('state') + ' (' + stateNames[$(this).data('state')] + ')\r\nStart Time: ' + startDate.toLocaleTimeString() + '\r\nEnd Time: ' + endDate.toLocaleTimeString() + '\r\nDuration: ' + duration);
event.preventDefault();
event.stopPropagation();
return false;
});
I just want to move all this info into a tooltip rather than an alert. I don't seem to be doing it right though.
I tried the following per tipTip's documentation to just get the tooltip itself to appear and it's not working.:
$(function(){
$(".state-entry").tipTip({maxWidth: "auto", edgeOffset: 10});
});
How would I move in this info in my jQuery to this tooltip type, not sure what I am missing. Thanks!
I am presuming that you are adding the state-entry divs dynamically?
if so when you create one you have to tiptipit when it is created.
here is a fiddle that shows dynamic elements not working unless you tiptip them.