Add Location to preview window (tooltip)

[Andrej]

Hi there,

is there a possibility, the event location in the preview windows to let show?
https://www.dropbox.com/s/l59srj9k8g3a1g6/image001.png
Thank un sorry for my engllisch (google translate)
Andrej

[Brook]

Howdy Andrej,

That is certainly possible. You will need to create a theme override. The file you want to override is “the-events-calendar/month/tooltip.php”. There are a few different PHP functions you can use to output venue data:

• tribe_get_venue
• tribe_get_venue_id
• tribe_get_venue_label_plural
• tribe_get_venue_label_singular
• tribe_get_venue_link
• tribe_get_venue_website_link
• tribe_get_venues

Add the PHP function you want to that tooltip.php override that you created.

Did you understand everything I said? It is not a problem that you do not speak English natively. I will happily clarify anything that I can. Thank you for commenting here!

– Brook

[Andrej]

Hi Brook,

I have this line of code
<abbr class=”tribe-events-abbr”> [[=VenueCity]]</abbr>
inserted in the script. But it does not work. Have an idea?

Thanks and regards
Andrej

<script type=”text/html” id=”tribe_tmpl_tooltip”>
<div id=”tribe-events-tooltip-[[=eventId]]” class=”tribe-events-tooltip”>
<h4 class=”entry-title summary”>[[=title]]</h4>
<div class=”tribe-events-event-body”>
<div class=”duration”>
<abbr class=”tribe-events-abbr updated published dtstart”>[[=startTime]] </abbr>
[[ if(endTime.length) { ]]
-<abbr class=”tribe-events-abbr dtend”> [[=endTime]]</abbr>
[[ } ]]
<abbr class=”tribe-events-abbr”> [[=VenueCity]]</abbr>
</div>
[[ if(imageTooltipSrc.length) { ]]
<div class=”tribe-events-event-thumb”>

</div>
[[ } ]]
[[ if(excerpt.length) { ]]
<p class=”entry-summary description”>[[=raw excerpt]]</p>
[[ } ]]
<span class=”tribe-events-arrow”></span>
</div>
</div>
</script>

[Brook]

Howdy Andrej,

The problem is that venueCity is not defined. There is more info found in our code comments on month/single-event.php:

/**
* How to Use the Javascript Templating System in this View
* ========================================================
*
* Month view (and week in events pro) has implemented javascript templating to power its rich tooltips and mobile views
* as of Events Version 3.3. This is a guide on how to modify, extend and use this functionality.
*
* 1) Overview
*
* As of version 3.3 our tooltips and mobile views use a custom javascript templating solution.
*
* How it works: event data for each event – such as title, start and end time, excerpt etc – is stored on a data
* attribute tagged “data-tribejson” in the markup. This particular json works with simple single level key value pairs.
* The key is used in the javascript template to call our value output.
*
* The javascript templates are stored in two new files in the views folder, mobile.php and tooltip.php. You can modify
* these templates as you wish, and add new data to it for use either in these templates or anywhere on these views. The
* javascript templates themselves are explained further on.
*
* This “data-tribejson” attribute contains a string of valid json that must have its double quotes escaped correctly so
* it can be used both on a data att and for use in jquery’s json methods. Scary? Dont worry, we’ve taken care of this
* encoding for you, find out how in the next section.
*
* 2) The Template Tags
*
* Two new template tags have been introduced to power this system:
*
* tribe_events_template_data()
* tribe_prepare_for_json().
*
* tribe_events_template_data( $post_object, $additional_data )
* ============================================================
*
* This is the main template tag that will output the string of valid json in the template file. It takes the event post
* object and an optional php array with additional data for output in the json string. Right now we use this only in
* month view in events, and week view in events pro. You can add it to other view files if you want handy event data
* for use in your own javascript. The stock template tag supplies this json string (remember, the key on the left is
* what we use in the javascript template file to call the data on the right):
*
* {
* “eventId”: POST ID,
* “title”: “POST TITLE”,
* “permalink”: “POST PERMALINK”,
* “startTime”: “EVENT START TIME”,
* “endTime”: “EVENT END TIME (MAY NOT BE SET)”,
* “imageSrc”: “IMAGE THUMB FOR MOBILE(MAY NOT BE SET)”,
* “imageTooltipSrc”: “IMAGE THUMB FOR TOOLTIP(MAY NOT BE SET)”,
* “excerpt”: “POST EXCERPT”
* }
*
* tribe_prepare_for_json( $string )
* =================================
*
* This template tag is used internally by the previous tag, but has been made public for your use as well. Please do
* note that any additional params you pass into tribe_events_template_data() will automatically be passed through this
* function and so you need not do that step manually.
*
* 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.
*
* After we have our data we supply it along with the post object. Now we’ll cover the javascript template.
*
* 3) The Javascript Templates
*
* As said earlier the templates are stored in tooltip.php and mobile.php in the month view folder. Javascript templates
* are simply standard html markup with keys wrapped in an expression that our parsing function uses to populate the
* values to. Our expression is a [[, THE KEY, followed by a ]]
*
* The template has 3 modes when parsing these.
*
* [[ ]] is for executing javascript you place between the expression. Note below how we test for the presence of an
* end time and image thumbnail using this.
*
* [[= ]] Is for a string with escaped html.
*
* [[=raw ]] Is for a string with html preserved. make sure to test for xss vulnerabilities using this method.
*
* Now lets look at the tooltip template. Compare the keys in it to the json string in section 2 above to map out whats
* going on.
*
*
*
* <script type=”text/html” id=”tribe_tmpl_tooltip”>
* <div id=”tribe-events-tooltip-[[=eventId]]” class=”tribe-events-tooltip”>
* <h4 class=”entry-title summary”>[[=title]]</h4>
* <div class=”tribe-events-event-body”>
* <div class=”duration”>
* <abbr class=”tribe-events-abbr updated published dtstart”>[[=startTime]] </abbr>
* [[ if(endTime.length) { ]]
* -<abbr class=”tribe-events-abbr dtend”> [[=endTime]]</abbr>
* [[ } ]]
* </div>
* [[ if(imageTooltipSrc.length) { ]]
* <div class=”tribe-events-event-thumb”>
*
* </div>
* [[ } ]]
* [[ if(excerpt.length) { ]]
* <p class=”entry-summary description”>[[=raw excerpt]]</p>
* [[ } ]]
* <span class=”tribe-events-arrow”></span>
* </div>
* </div>
* </script>
*
*
* Please note when creating your own data to feed to this that you must supply the key every time, even if the value is
* empty. The templating function will error if one of the keys in the template is missing from the json.

Basically you are going to want to add a new bit of data to the JS template like the example “hello” above. Only instead of “hello” it will be “venueCity”, and instead of using the variable $string you want the data to be tribe_get_city().

Does that make sense? Does it answer your question? Thanks!

– Brook

[Brook]

Since this topic has gone for a spell without an update I am going to archive. However, if you experiencing this problem still please open a new topic. We’d be glad to help. Cheers!

– Brook

[Author]

Posts