Skip Navigation

[Resolved] Design to popup window

This support ticket is created 3 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 1 reply, has 2 voices.

Last updated by Luo Yang 3 years, 7 months ago.

Assisted by: Luo Yang.

Author
Posts
#2083411

Tell us what you are trying to do?
Hi I want to use the popup window, but I am not able to add CSS to design the window, which is also to small (I want so show post title, image, link to single post and category.
The window is too small, I would like to ad a padding and so on.
Is it also possible to have the popup on hoover?

Is there any documentation that you are following?
yes, but it was not sufficient
Is there a similar example that we can see?
hidden link Password: toolset
What is the link to your site?

Thanks in advance
Jutta

#2084327
popup-style.JPG

Hello,

Q1) but I am not able to add CSS to design the window, which is also to small (I want so show post title, image, link to single post and category.

You can style the popup window with CSS codes, for example:

.gm-style-iw-c{
width: 300px;
}

See my screenshot popup-style.JPG

2) Is it also possible to have the popup on hoover?
It needs custom JS codes, for example:

jQuery(document).on( 'js_event_wpv_addon_maps_init_map_completed',function(event_settings) {
	var mapid = 'map-5'; // here replace map-5 with your map ID
	var markers = WPViews.view_addon_maps.markers;
	var map = WPViews.view_addon_maps.get_map( mapid );
	for(var marker in markers[ mapid ]) {
		markers[ mapid ][marker].addListener('mouseover', function() {
			google.maps.event.trigger(this, 'click');
		});
	}
} );