Tooltip popup issue…again!

[Jeremy]

The popup tooltip is blocking the link to the event in the Calendar view, again, but this time to the left or so I suppose left… I’ve tried to Inspect the problem tooltip but can’t figure it out.
I implemented some code from the last discussion, and never noticed the other one:
.tribe-events-calendar .tribe-events-right .tribe-events-tooltip {
bottom: 125px !important;
}

http://skidancer.com/?post_type=tribe_events

Thanks for the help!

[Barry]

Hi Jeremy,

That’s odd.

I see what I think is the problem you are describing for some events but not others.

I also note that you seem to have made a few customizations to month view (or perhaps your theme shipped with some customizations): I’m curious, might these relate to the problem you are seeing with tooltips?

If you (temporarily) remove any template overrides or other event-related customizations, is the issue resolved?

If we can pin down the source of this issue that would be a great start 🙂

[Jeremy]

Thanks Barry!
So, looking into it, I found what to add/remove from the CSS to make the tooltip display correctly on a two line event title.
The issue still exists to a point on the three line event titles.

So, why is the tooltip being affected by my adding the country, city…etc to the single-event.php file?
Here’s what I added:

<p class="tc"><?php echo tribe_get_country(); ?></p>
<p class="tcb"><?php echo tribe_get_city(); ?>, <?php echo tribe_get_stateprovince(); ?></p>

Also, how would I go about displaying the start & end date in the tooltip inline?
Thanks

[Barry]

Hi Jeremy,

On taking a look at your site this morning I noticed the tooltip issue appears to have been resolved – can you confirm that’s the case (I’d love to hear what steps you took if so)!

Also, how would I go about displaying the start & end date in the tooltip inline?

There are some fairly comprehensive instructions included within the month/single-event.php template – following the steps described there is going to be the best way forward, here.

If you do have any follow up questions on this specific issue of customizing the tooltip, though, it would be awesome if you could break them out into a fresh topic – as we do have a policy of sticking to one issue per topic.

Thanks!

[Jeremy]

That tooltip issue has been resolved by increasing the bottom margin, it still does not look or work right on three line titled events. I still would like to know how to change the php or why the php was affected by my adding this code to the single-event.php file. It is added to the bottom.

<p class="tc"><?php echo tribe_get_country(); ?></p>
<p class="tcb"><?php echo tribe_get_city(); ?>, <?php echo tribe_get_stateprovince(); ?></p>

Thanks!

[Barry]

Hey there Jeremy,

It sounds like you have added these extra lines of code directly within the month/single-event.php template.

This actually is not the recommended way of getting extra information into the tooltip (in fact, it’s likely to produce the wrong results in a lot of cases) and I would again recommend that you read through the extensive documentation found inline within the original month/single-event.php template.

In short, you ought to pass an array of additional data as described in the inline docs:

Lets say we want to add our own dynamic data from custom post meta to the javascript template for mobile. For now lets say that the key name we want to use is “hello” in our js template. The following example shows how we would go about adding the custom post meta and appending it to our event json string that is output in the markup.

$additional_data = array();
$string = get_post_meta( get_the_ID(), ‘hello_meta’ ); // this string can be anything
$additional_data[‘hello’] = $string;
echo tribe_events_template_data( $post, $additional_data ); ?>

Explanation: we create an empty array to cram our data into. We can add as much as we want, there are no limits on data attribute length in the html5 spec. We want to call this data with the word “hello” in the js template, so that is the key name we give it in the php array.

In this case you’re likely to use meaningful names such as venueCountry rather than ‘hello’ and you can then make use of the JS templating system to inject those pieces of information into month/tooltip.php, something like this:

<p class="tc"> [[=venueCountry]] </p>

So long as you add these paragraphs within the tribe-events-event-body div (in the tooltip template), the positioning should be just fine.

[Barry]

Hi!

It’s been a while so I’m going to go ahead and close this topic.

• Need help with anything else? Go right ahead and post a new topic, one of the team will be only too happy to help
• Still need help with this issue and need to re-open it? Again, please simply create a new topic and link to this one to provide the team with some context

Thanks!

[Author]

Posts