Google Calendar style bubble

[firefusion]

Hi,

i've like to create a tooltip for a calendar that functions like that of the Google calendar.

[list=*]
[*]Load content from hidden div or span
Open on click
Close button and close on click outside tip
Not to exceed the current pages width[/*]
[/list]

If this can't be done with qTip can it be done with any others?

Thanks.

[Craig]

This can indeed be done with qTip. Try out this little code snippet:

JS Code

$('.elementToGiveTooltip').qtip(
{
   content: {
      text: $('.elementWithTheContent'),
      title: {
         text: 'Title for the tooltip, or blank... either will do!',
         button: 'x' // can put an <img /> tag or any other valid HTML in here. Clicking it closes the tooltip.
      }
   },
   position: {
      corner: {
         tooltip: 'bottomLeft', // Display at the top right hand corner like Google Calendar
         target: 'topRight'
      },
      adjust: {
         screen: true // Keep the tooltip within the viewport at all times
      }
   },
   show: 'click',
   hide: 'unfocus', // Close the tooltip when it loses focus e.g. anywhere except the tooltip is clicked
   style: {
      background: 'white',
      border: {
         color: '#ABABAB', // Grey style border
         radius: 5 // Give it some rounded corners (Note 1px rounded borders aren't supported at the moment)
      },
      tip: true // Give it a speech bubble tip (corner is automatically detected)
   }
});

[firefusion]

Excellent! Just what i was after!

One problem I have though (pardon my ignorance) is how to I get it to only display the hidden content associated with the link you click on?

So basically if there are lots of events on the calendar and each has it's own info, how do i show only the info of only the event that was clicking? At the moment is shows all content wrapped in the "event_bubble" class.

My markup goes like this....

JS Code

<div class="cal_event">
<div class="event_bubble"><p>Info to be displayed in bubble when event link is clicked</p></div>
<p><a href="#" class="event" title="Event Title">My Event</a></p>
</div>
 
<div class="cal_event">
<div class="event_bubble"><p>Info to be displayed in bubble when event link is clicked</p></div>
<p><a href="#" class="event" title="Event Title 2">My Event 2</a></p>
</div>

Also can I make the title of the tooltip the same as the title of the link or the same as a h4 inside the "event_bubble" class?

Thanks for your help.

[Craig]

Sure. Try this code out:

JS Code

$('a.event').each(function()
{
$(this).qtip(
{
   content: {
      text: $(this).prev('.event_bubble'), // Find the event bubble element located BEFORE the link on the page
      title: {
         text: $(this).attr('title'), // Use the link title
         button: 'x' // can put an <img /> tag or any other valid HTML in here. Clicking it closes the tooltip.
      }
   },
   position: {
      corner: {
         tooltip: 'bottomLeft', // Display at the top right hand corner like Google Calendar
         target: 'topRight'
      },
      adjust: {
         screen: true // Keep the tooltip within the viewport at all times
      }
   },
   show: 'click',
   hide: 'unfocus', // Close the tooltip when it loses focus e.g. anywhere except the tooltip is clicked
   style: {
      background: 'white',
      border: {
         color: '#ABABAB', // Grey style border
         radius: 5 // Give it some rounded corners (Note 1px rounded borders aren't supported at the moment)
      },
      tip: true // Give it a speech bubble tip (corner is automatically detected)
   }
});
});

[firefusion]

Thanks for your patience. I'm almost there!

If the "event" link is wrapped in a p tag it doesn't pick-up the event bubble.

JS Code

<div class="event_bubble"><p>Info to be displayed in bubble when event link is clicked</p></div>
<p><a href="#" class="event" title="Event Title">My Event</a></p>

Also how can i hide the .event_bubble content until the link is clicked? I tried setting "display: none;" in the CSS but that stops it from being displayed even when clicked.

Thanks again for your help.

[firefusion]

I fixed the issue with hiding the content with the following CSS

JS Code

.event_bubble {
display: none;
}
 
.qtip-content .event_bubble {
display: block;
}

But I still have the problem of the tooltip not working if link is wrapped in a p tag.

[Craig]

It isn't picking up the element because its basically searching for sibling elements within the p element for your event bubble content. Try this code out instead, which should also fix the display problem you're facing (remove the display: none in your CSS):

JS Code

$('a.event').each(function()
{
$(this).qtip(
{
   content: {
      text: $(this).parent('p').prev('.event_bubble').remove(), // Find the event bubble element located BEFORE the link on the page
      title: {
         text: $(this).attr('title'), // Use the link title
         button: 'x' // can put an <img /> tag or any other valid HTML in here. Clicking it closes the tooltip.
      }
   },
   position: {
      corner: {
         tooltip: 'bottomLeft', // Display at the top right hand corner like Google Calendar
         target: 'topRight'
      },
      adjust: {
         screen: true // Keep the tooltip within the viewport at all times
      }
   },
   show: 'click',
   hide: 'unfocus', // Close the tooltip when it loses focus e.g. anywhere except the tooltip is clicked
   style: {
      background: 'white',
      border: {
         color: '#ABABAB', // Grey style border
         radius: 5 // Give it some rounded corners (Note 1px rounded borders aren't supported at the moment)
      },
      tip: true // Give it a speech bubble tip (corner is automatically detected)
   }
});
});