Disabling The Calendar Pop-up views

[Doug De Stefano]

I have read the more complicated explanations:
add a {visibility: hidden;} to the CSS class.
Is there nothing in the Admin settings to just toggle it on or off??
Really rather not mess with the code level solutions.

[Brook]

Howdy Awakeninghearts,

I would love to help you with that. There is not a setting for that feature. To be upfront, we have not seen enough users want to do this in order to justify building a setting.

Our mantra here is to build popular requests into settings, and for everything else make it trivially easy to modify via code. That way we can avoid becoming a big bloat plugin with a million settings no one really uses, and thus get all the complaints associated with bloat such as slowness and hard to learn.

Does that answer your question?

Cheers!

– Brook

[Doug De Stefano]

Brook I understand. So what is the easiest most straight forward way to turn off the pop-ups.
And let me explain the reason for this is because currently on our site when people try to see
events and click an event on the calendar the pop-up view shows up and it doesn’t have all the
details of the event. And the people don’t know they have to click the calendar event a second
time to get the detailed page. So for now I thought it would be easiest to just turn off that
feature all together. Now I know my version of the Calendar is not the latest and maybe this is
all fixed in that new version not sure. What can you recommend for my situation. Thanks!

[Brook]

Howdy Awakening,

Thank you for sharing the usability feedback. We do frequent usability tests with folks who have not touched the calendar before to find areas we can improve. We had not seen that yet.

The easiest way to hide all tooltips would be to add this CSS to one of your theme’s CSS files:

body .tribe-events-calendar .tribe-events-tooltip { visibility:hidden; }

If you wish to selectively hide it from some views, like Month, but not others, like Week, then you can do that by modifying Month View’s template file (/the-events-calendar/src/views/month/content.php) on line 55 you will see a call to tribe_get_template_part( ‘month/tooltip’ ); Just delete that and the tooltip is gone. The best way to modify these files is by following our Themer’s Guide.

Does that all make sense? Would the CSS method work easiest for you?

• Brook

[Doug De Stefano]

Just not sure where to find these files.When you say:
The easiest way to hide all tooltips would be to add this CSS to one of your theme’s CSS files:
Well I have TwentyThirteen so when I ftp in I go to the wp-content folder.Then Themes to TwentyThirteen-child.
Now the style.css I see there does not have the code you mentioned in it.
body .tribe-events-calendar .tribe-events-tooltip { visibility:hidden; }
So I’m thinking I need to find a different style.css file that is effecting the Calendar.
But not sure where to go to find that?

[Doug De Stefano]

Well I used the style.css file in the Child directory and just added it to that. It works.
The pop-ups when hovering over an event have stopped. Now ideally I would just like that to
happen for the Mobile Device users not the Computer users. Is there a way to isolate it so
that its just turned off for mobile devices? See when your on a phone and go to my calendar
if you click on an event it shows you only the pop-up hover view and the user doesn’t get all
the details. They don’t know they need to click on the event a second time to get the details
page. So I figured best if I just turn it off for now but it would be ideal if it was off only
for the mobile devices. I think the computer users like it and its intuitive enough then for them
to know to click the event for details. Hope that is clearer. Thanks.

[Brook]

Howdy awakening,

Good call on adding that to your child theme’s CSS. That is a great spot.

You can certainly adjust that CSS to only display for some devices or screen size using media queries. Even the first example in that link would probably be ideally suited to limiting that CSS to phones:

@media (max-width: 600px) {
body .tribe-events-calendar .tribe-events-tooltip { visibility:hidden; }
}

You could replace the code you already pasted in to the child theme with that. That do what you wanted?

Cheers!

– Brook

[Doug De Stefano]

Brook….I replaced the previous code with that and its not working. I go to my site with my Iphone 4s and when
I click on an event it still gives me the pop-up preview window not the full detailed event page.
Any ideas?

[Doug De Stefano]

I have that code on my style.css in the twentythirteen-child theme directory
on this site staging.awakeninghearts.com and it allows the pop-up on the Computer
but also on my iphone 4s. And I used this code:
@media (max-width: 600px) {
body .tribe-events-calendar .tribe-events-tooltip { visibility:hidden; }
}
Is that correct? What does the (max-width: 600px) actually mean?

[Brook]

Hello again,

Is that correct? What does the (max-width: 600px) actually mean?

The max width is referring to the screen width. Checkout that media queries link to learn more.

Depending on which iPhone you are targetting the screen width in browser is anywhere from 320px to 736px for the 6+. If you are targeting one of the newer giant ones you might need to bump the max width up.

Thanks for sharing a link to your staging server. I was wondering why you were seeing that popup on mobile to begin with. Now that I see your site I see that the responsive features in TwentyThirteen have been broken or removed. This means the site does not shrink to fit the screen of a phone, and the phone user must zoom in to see some things. It further means that instead of getting the shrunk down mobile view of the calendar (which will see in our demo sites like wpshindig.com) that has no popup tooltip, you are getting the desktop view which has a popup. It’s possible even making the above media query 737px will not work because your site’s responsive framework has been removed. You should certainly try it, but it might not fix things.

I wish I had more details on what was broken. I am not sure myself. But if you run the default Twenty Thirteen theme and view it form a mobile device, you will see how it and the events calendar behave on mobile devices.

• Brook

 

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts