Hello,

For the countdown I reduced the size a bit a quit the seconds so is OK now.

For the tootips, its not working yet:

1.- This code works only in one box – please see pictures 10 in https://drive.google.com/open?id=0B1pkqICrGgvKflRwckk2ZnR1b29VNEVQbVYwNUlYTlRBUXg2ZlkyLUJqWGN6SmxJRlZXYTg

@media only screen and (min-device-width: 768px) and (max-device-width: 1386px) {
.avia-tooltip.avia-tt.av-tt-xlarge-width.av-tt-pos-right.av-tt-align-top.av-mobile-fallback-active.av-permanent-tooltip-single.transparent_dark.av-tt-hotspot {
padding: 3px !important;
font-size: 10px;
}}

2.- This code works great
.av-tt-xlarge-width {
width: 240px !important;
}

3.- There is a problem of overlapping between sections that I’ve resolved moving to different sections. Pictures 10 and 11.

Thanks
Jorge

Ok Thanks, What if I put an image within the tooltip. Is there any way to override the width/height and padding etc? to match the size of my image

hi,

There is no need for a site link, I only wish to know if there is a quick way with Enfold to use “tooltips” on general text and buttons ??

thanks

oh, sorry,
I am referring to the TEXT and Buttons across the site.
Any short code to apply the tooltips on text and buttons?

thanks

Hi Ismael,
thank you for your reply.

I found the shortcodes.js file in my Enfold download.

I took the section just relating to the Google Maps and copied it into a new file called shortcodes.js
I edited the line in question and uploaded the new shortcodes.js file to my CHILD theme.

The shortcodes.js file in the PARENT theme is still as it was.

The new file shows up in Filezilla VIA FTP in the child theme but not in the Admin – Appearance – Editor
in the WordPress backend, still just functions.php and style.css .

It didn’t change the map markers tooltip appearance on the front end.

Will it only work if I edit the shortcodes.js file in the parent theme?

Here is the code in the new file in the child theme. I only included the piece relating to the Google Map.

(function($)
{
“use strict”;

$.AviaMapsAPI = function(options, container)
{
if(typeof window.av_google_map == ‘undefined’)
{
$.avia_utilities.log(‘Map creation stopped, var av_google_map not found’); return
}

// gatehr container and map data
this.container = container;
this.$container = $( container );
this.$body = $(‘body’);
this.$mapid = this.$container.data(‘mapid’) – 1;
this.$data = window.av_google_map[this.$mapid];
this.retina = window.devicePixelRatio > 1;

// set up the whole api object
this._init( options );
}

$.AviaMapsAPI.apiFiles =
{
loading: false,
finished: false,
src: ‘https://maps.googleapis.com/maps/api/js?v=3.6&sensor=false&callback=aviaOnGoogleMapsLoaded’
}

$.AviaMapsAPI.prototype =
{
_init: function()
{
this._bind_execution();
this._getAPI();
},

_getAPI: function( )
{
//make sure the api file is loaded only once
if((typeof window.google == ‘undefined’ || typeof window.google.maps == ‘undefined’) && $.AviaMapsAPI.apiFiles.loading == false)
{
$.AviaMapsAPI.apiFiles.loading = true;
var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
script.src = $.AviaMapsAPI.apiFiles.src;

document.body.appendChild(script);
}
else if((typeof window.google != ‘undefined’ && typeof window.google.maps != ‘undefined’) || $.AviaMapsAPI.apiFiles.loading == false)
//else if($.AviaMapsAPI.apiFiles.finished === true)
{
this._applyMap();
}
},

_bind_execution: function()
{
this.$body.on(‘av-google-maps-api-loaded’, $.proxy( this._applyMap, this) );
},

_applyMap: function()
{
if(typeof this.map != ‘undefined’) return;
if(!this.$data.marker || !this.$data.marker[0] || !this.$data.marker[0].long || !this.$data.marker[0].long)
{
$.avia_utilities.log(‘Latitude or Longitude missing’, ‘map-error’);
return;
}

var _self = this,
mobile_drag = $.avia_utilities.isMobile ? this.$data.mobile_drag_control : true,
zoomValue = this.$data.zoom == “auto” ? 10 : this.$data.zoom;

this.mapVars = {
mapMaker: false, //mapmaker tiles are user generated content maps. might hold more info but also be inaccurate
mapTypeControl: false,
backgroundColor:’transparent’,
streetViewControl: false,
panControl: this.$data.pan_control,
zoomControl: this.$data.zoom_control,
draggable: mobile_drag,
scrollwheel: false,
zoom: zoomValue,
mapTypeId:google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(this.$data.marker[0].lat, this.$data.marker[0].long),
styles:[{featureType: “poi”, elementType: “labels”, stylers: [ { visibility: “off” }] }]
};

this.map = new google.maps.Map(this.container, this.mapVars);

this._applyMapStyle();

if(this.$data.zoom == “auto”)
{
this._setAutoZoom();
}

google.maps.event.addListenerOnce(this.map, ’tilesloaded’, function() {
_self._addMarkers();
});
},

_setAutoZoom: function()
{
var bounds = new google.maps.LatLngBounds();

for (var key in this.$data.marker)
{
bounds.extend( new google.maps.LatLng (this.$data.marker[key].lat , this.$data.marker[key].long) );
}

this.map.fitBounds(bounds);
},

_applyMapStyle: function()
{
var stylers = [], style = [], mapType;

if(this.$data.hue != “”) stylers.push({hue: this.$data.hue});
if(this.$data.saturation != “”) stylers.push({saturation: this.$data.saturation});

if(stylers.length)
{
style = [{
featureType: “all”,
elementType: “all”,
stylers: stylers
}, {
featureType: “poi”,
stylers: [
{ visibility: “off” }
]
}];

mapType = new google.maps.StyledMapType(style, { name:”av_map_style” });
this.map.mapTypes.set(‘av_styled_map’, mapType);
this.map.setMapTypeId(‘av_styled_map’);
}
},

_addMarkers: function()
{
for (var key in this.$data.marker)
{
var _self = this;

(function(key, _self)
{
setTimeout(function()
{
var marker = “”;

if(!_self.$data.marker[key] || !_self.$data.marker[key].long || !_self.$data.marker[key].long)
{
$.avia_utilities.log(‘Latitude or Longitude for single marker missing’, ‘map-error’);
return;
}

_self.$data.LatLng = new google.maps.LatLng(_self.$data.marker[key].lat, _self.$data.marker[key].long);

var markerArgs = {
flat: false,
position: _self.$data.LatLng,
animation: google.maps.Animation.BOUNCE,
map: _self.map,
title: _self.$data.marker[key].address,
optimized: false
};

//set a custom marker image if available. also set the size and reduce the marker on retina size so its sharp
if(_self.$data.marker[key].icon && _self.$data.marker[key].imagesize)
{
var size = _self.$data.marker[key].imagesize, half = “”, full = “”;

if(_self.retina && size > 40) size = 40; //retina downsize to at least half the px size
half = new google.maps.Point(size / 2, size ) ; //used to position the marker
full = new google.maps.Size(size , size ) ; //marker size
markerArgs.icon = new google.maps.MarkerImage(_self.$data.marker[key].icon, null, null, half, full);
}

marker = new google.maps.Marker(markerArgs);

setTimeout(function(){ marker.setAnimation(null); _self._infoWindow(_self.map, marker, _self.$data.marker[key]); },500);

},200 * (parseInt(key,10) + 1));

}(key, _self));
}
},

_infoWindow: function(map, marker, data)
{
var info = $.trim(data.content);

if(info != “”)
{
var infowindow = new google.maps.InfoWindow({
content: info
});

infowindow.open(map,marker);

if(data.tooltip_display) infowindow.open(map,marker);
}
}

}

//simple wrapper to call the api. makes sure that the api data is not applied twice
$.fn.aviaMaps = function( options )
{
return this.each(function()
{
var self = $.data( this, ‘aviaMapsApi’ );

if(!self)
{
self = $.data( this, ‘aviaMapsApi’, new $.AviaMapsAPI( options, this ) );
}
});
}

})( jQuery );

//this function is executed once the api file is loaded
window.aviaOnGoogleMapsLoaded = function(){ $(‘body’).trigger(‘av-google-maps-api-loaded’); $.AviaMapsAPI.apiFiles.finished = true; };

Hi,
thanks for the clarification. I have said the same to my customer :-( If you take a look at my page you will see that the tooltip is not showing the title (“Titel”) of the media library but the “Bildunterschrift” from the media library. Even if I let the Titel empty. So on mouse over we have the caption coming up and the tooltip, both with the same words. Can you check, please?

Best Regards

Maybe I have made a mistake and its actually “.avia-tooltip” or .avia-tooltip tt something like this, the little boxes that pop up when overing over gallery images.