वर्ष देखने में पूर्ण कैलकुलेटर के लिए टूलटिप

Question

मैं वर्ष दृश्य में पूर्ण कैलकुलेटर के लिए टूलटिप जोड़ना चाहता हूं। मैंने नीचे दिए गए एक के साथ प्रयास किया लेकिन यह महीने के दृश्य में टूलटिप जोड़ा गया। मैंने Google के साथ प्रयास किया लेकिन इससे संबंधित कुछ भी नहीं मिला। क्या साल के दृश्य में टूलटिप जोड़ने का कोई और तरीका है?

eventMouseover: function(calEvent,jsEvent) { 
      xOffset = 10; 
      yOffset = 30; 
      $("body").append(calEvent.tooltip); 
      $("#tooltip") 
       .css("top",(jsEvent.clientY - xOffset) + "px") 
       .css("left",(jsEvent.clientX + yOffset) + "px") 
       .fadeIn("fast"); 
    }, 
    eventMouseout: function(calEvent,jsEvent) { 
     $("#tooltip").remove(); 
    } 

Answer 1

eventMouseover: function(calEvent, jsEvent) { 
    var tooltip = '<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">' + calEvent.title + '</div>'; 
    var $tooltip = $(tooltip).appendTo('body'); 

    $(this).mouseover(function(e) { 
     $(this).css('z-index', 10000); 
     $tooltip.fadeIn('500'); 
     $tooltip.fadeTo('10', 1.9); 
    }).mousemove(function(e) { 
     $tooltip.css('top', e.pageY + 10); 
     $tooltip.css('left', e.pageX + 20); 
    }); 
}, 

eventMouseout: function(calEvent, jsEvent) { 
    $(this).css('z-index', 8); 
    $('.tooltipevent').remove(); 
}, 

Answer 2

के बाद से 1.5 संस्करण, आप qtip उपयोग कर सकते हैं एक घटना पर एक टिप प्रदर्शित करने के लिए (मैं भी नशे का उपयोग, लेकिन यह टूलटिप साथ काम करना चाहिए):

$('#calendar').fullCalendar({ 
    events: [ 
     { 
      title: 'My Event', 
      start: '2010-01-01', 
      description: 'This is a cool event' 
     } 
     // more events here 
    ], 
    eventRender: function(event, element) { 
     element.qtip({ 
      content: event.description 
     }); 
    } 
}); 

दस्तावेज़ स्रोत: http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/

उम्मीद है कि इस मदद करता है

Answer 3

आप किसी भी टूलटिप lib बिना एचटीएमएल शीर्षक विशेषता का उपयोग कर सकते हैं:

$('#calendar').fullCalendar({ 
    events: [ 
     { 
      title: 'My Event', 
      start: '2014-01-01', 
      tooltip: 'This is a cool event' 
     } 
     // more events here 
    ], 
    eventRender: function(event, element) { 
     element.attr('title', event.tooltip); 
    } 
}); 

Answer 4

यहाँ एक और कार्यान्वयन

eventMouseover: function(calEvent, jsEvent) { var tooltip = '<div class="tooltipevent" style="width:130px;height:100px;background:#aed0ea;position:absolute;z-index:10001;"> Title: ' + calEvent.title + '</div>'; var $tool = $(tooltip).appendTo('body'); 
$(this).mouseover(function(e) { 
    $(this).css('z-index', 10000); 
      $tool.fadeIn('500'); 
      $tool.fadeTo('10', 1.9); 
}).mousemove(function(e) { 
    $tool.css('top', e.pageY + 10); 
    $tool.css('left', e.pageX + 20); 
}); 
}, 
eventMouseout: function(calEvent, jsEvent) { 
$(this).css('z-index', 8); 
$('.tooltipevent').remove(); 
}, 

---