Category: Zurb Foundation

Problem: I wanted to use Foundation 4’s tooltips on some WordPress post thumbnail (featured) images, but wasn’t sure how to add the necessary data attribute and classes.

Solution: It turns out after some playing about that an array of attributes can be passed to the WordPress ‘get_the_post_thumbnail()‘ function. Firstly we need to add the class ‘has-tip’ (and any extra positioning classes like ‘tip-top’ if that’s where we want the tooltip to appear – see the Foundation Docs link at the top). We then need to add the data attribute ‘data-tooltip’. An example of how to do this is in the following code where I pull out a value from an Advanced Custom Field, and display a list of images with tooltips:

1
2
3
4
5
6
7
8

$icons = get_field('accom_spec_icons');
if ($icons && !is_wp_error($icons)) {
	echo '<ul class="small-block-grid-4">';
	foreach($icons as $icon) {
		echo '<li>',get_the_post_thumbnail($icon->ID,'box-thumb',array('title'=>trim(strip_tags($icon->post_title)),'class'=>'has-tip tip-top','data-tooltip'=>'')),'</li>';
	}
	echo '</ul>';
}

It’s important to add the ‘data-tooltip’ attribute with a value of ”, otherwise it wont be inserted into the generated image tag correctly.