Try checking the container elements further up the DOM hierarchy

Column elements are floated, that could be the problem.

Is there a way to force tooltips to display only within the calendar?

One workaround would be to make sure text in event tittle and description are short enough to not extend out of the calendar div....

Even if the columns are floated you should be able to set the z-index on the main content area to be higher than the module columns.

No matter what I do the popup is clipped by columns on the side. I set left and right columns to z-index 0 and 1, centre to 999. I set overflow for class .maintable to visible. No effect.

For now I want to restrict the popup to the "jevents" div.

I am willing to look through the code but I do not know javascript. Any pointers?

Thanks.

Set the z-index to: 99999

Failing that, provide us with a link and if it's a quick find we will happily help.

Thanks
Tony

No, setting content section to z-index 99999 did not help.

2 things I found searching:

I was able to solve the problem by setting data-container="body" on the html element

HTML example:

<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">

    hover over me

</a>

JavaScript example:

$('your element').tooltip({ container: 'body' })

And from w3schools:

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Maybe the 'container:body' idea would work.

I will try it in js if you point me in the right direction.

Here is the link to my site:

www tennisbaiedurfe com/index.php/en/schedule/month.calendar/2015/05/16/-

See event 'test'.

I'm not getting anything to pop-up for me? Please explain how to replicate the popup?

These are popovers not tooltips but the principal would still work.

Try changing line 161 of components/com_jevents/views/ext/month/tmpl/calendar_cell.php which currently reads:

JevHtmlBootstrap::popover('.hasjevtip' , array("trigger"=>"hover focus", "placement"=>"top", "container"=>"#jevents_body", "delay"=> array( "hide"=> 150 )));

Or use the sort of CSS I was suggesting earlier

body > div.container > .row > div:first-child {

    z-index: 10;

}

Adding the CSS you posted did it. Popover now displays over the columns. I dont quite understand the CSS with the >'s but I will look that up.

Thanks for your time helping me solve this! Much appreciated!

Great to hear! Thanks for letting us know :-).