CODEWITHSUNDEEP
fullcalendarqtipqtip2
ews2001
ews2001

Reputation: 2187

qtip2: Tooltip always appears in top left corner instead of targeted element

I've tried everything I can think of to get the tooltip by the hovered-over event. But for whatever reason it just appears every time in the top left corner of my browser window.

Notice how the test tooltip hover is in the top left corner of browser

Here is my javascript:

$(document).ready(function(){
  var tooltip = $('<div/>').qtip({
  id:'myCalendar',
  prerender:true,
  content:{
      text:' ',
      title:{
          button:true,
      },
  },
  position:{
      my:'center left',
      at:'center right',
      target:'mouse',
      viewport:$('#myCalendar'),
      adjust:{
          mouse:false,
          scroll:false,
      },
  },
  show:false,
  hide:false,
  style:'qtip-light',}).qtip('api');

  $('#myCalendar').fullCalendar({
    editable:true,
    eventMouseout:function(e,j,v){
        tooltip.hide();
    },
    eventMouseover:function(e,j,v){
        var event = '<h3>'+e.title+'</h3>';
        tooltip.set({'content.text':event,}).reposition(e).show(e);
    },
    events:[{title:'All Day Event',start:new Date(y,m,1)}],
    header:{left:'prev,next today',center:'title',right:'month,agendaWeek,agendaDay'},
  });
});

I'm using all of the same javascript and css linked from this example on jsfiddle: http://jsfiddle.net/craga89/N78hs/

Can someone spot where I'm going wrong?

Upvotes: 0

Views: 2570

Answers (1)

ews2001
ews2001

Reputation: 2187

I couldn't ever get the code above to work, so I decided to go a different route and use the render event instead. Now it works exactly as I wanted by putting the qtip in the middle of the right side of each fullcalendar event on mouse over.

$(document).ready(function(){
  $('#myCalendar').fullCalendar({
    editable:true,
    eventRender:function(event,element,view){
      element.qtip({
        content:{
        text:'<h3>'+event.title+'</h3>',
      },
      position:{
        my:'center left',
        at:'center right'
      },
      show:'mouseover',
    }); 
  },
  events:[{title:'All Day Event',start:new Date(y,m,1)}],
  header:{left:'prev,next today',center:'title',right:'month,agendaWeek,agendaDay'},
  });
});

I still don't know why using this code works as expected. Note: I didn't change any of the stylesheets or javascript included with either fullcalendar or qtip, just something about how the code above was implemented improperly.

Upvotes: 1

Related Questions