Executive Pro – Show Excerpt on Hover over Post Title

[mparks]

I am using Executive Pro theme and have a list of post titles that are on my front page in the Home Top widget area. I am using Genesis Featured Posts and they display just the title. Is there a way to hover over the title and display an excerpt of the post? It currently displays nothing when hovering.

Thanks in advance for the help!

http://ca.ei2.org

[vajrasar]

First, that is possible but you have to do some custom code for that. Second, with that approach your page will then resize every time someone will hover onto the title (for making room to show excerpt) unless it is done in a tooltip fashion (using JS).

---

I make WordPress websites using Genesis Framework.

WordPress/Genesis Development | Customizations

[vajrasar]

For the same see this - https://sridharkatakam.com/portfolio-grid-in-dynamik-with-title-and-excerpt-on-hover/

The live demo of how it would look - http://websitesetuppro.com/demos/beautiful-pro/portfolio/

The use case is when you show an image and the excerpt is contained in the image itself rather than making room for excerpts every time someone hovers on it.

---

I make WordPress websites using Genesis Framework.

WordPress/Genesis Development | Customizations

[mparks]

Thanks for the response. I am trying to make it like a tooltip would look where the excerpt just pops up on hover, not where it actual fits in into the page.

[vajrasar]

Here you go - http://imakewp.com/show-excerpt-as-tooltip-while-hovering-on-title/

---

I make WordPress websites using Genesis Framework.

WordPress/Genesis Development | Customizations

[mparks]

Thank you so much for all the help! I have done exactly as you stated on your site and I can't seem to get it. I did notice there is already some code similar to yours in the functions.php file. If I comment it out, it kills the site. This is what is already existing in the functions.php:

//* Enqueue Scripts
add_action( 'wp_enqueue_scripts', 'executive_load_scripts' );
function executive_load_scripts() {
/*
wp_enqueue_script( 'executive-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
*/
wp_enqueue_style( 'dashicons' );

wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), CHILD_THEME_VERSION );

}

One other thing, on the old site they did not acutally use the 'excerpt' field to fill the tool tip, it was just pulling the first x amount of characters from the post. I'm sorry I used the wrong terminology... it would be great if it could do that, but if it's too much trouble it can stay using the excerpt field.

Thanks again for all the help!
Kimberly

[mparks]

This was the code in the functions.php pertaining to this in the OLD site that we are updgrading. It used the old Crystal theme. Maybe it helps to see how it behaved on there:

add_action('wp_head','my_add_qtip');
function my_add_qtip() { ?>
<script type="text/javascript" src="/wp-content/themes/crystal/qtip/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){

$('#home-bottom div.post p').css('display', 'none');
$('#home-bottom div.post').each(function(index) {
if( $(this).children("p").text() ) {
$(this).children("h2").children("a" ).attr('title', $(this).children("p").text() + " ..." );
} else {
$(this).children("h2").children("a" ).removeAttr('title');
}
});
$('#home-bottom div.post a[title]').qtip({
show: 'mouseover',
hide: 'mouseout',
position: {
corner: { target: 'bottomMiddle', tooltip: 'topLeft' }
},
style: { name: 'cream' }
})

});
</script>

<?php

[vajrasar]

First, you can add the enqueue_script code, as it will not interfere with the existing one (also don't comment the old code).

Second, the JS you pasted in last reply seems to be doing the same with taking the_content instead of the_excerpt and showing it in tooltip. Moving forward, you can comment that code for a while and check the one I gave you in the way it is mentioned.

I will try and come up with fetching content from post content rather than excerpt in few hours and will update you here.

PS. It goes without saying but do take a full backup before making changes.

---

I make WordPress websites using Genesis Framework.

WordPress/Genesis Development | Customizations

[vajrasar]

In the code I mentioned (in the tutorial) to put in functions.php , replace that code with this -

<?php //* Don't include this opening php tag

//* Enqueue PowerTip
add_action( 'wp_enqueue_scripts', 'sk_load_powertip' );
function sk_load_powertip() {
	
	// Won't enqueue if the device is mobile as there is no hover functionality for those devices
	if ( wp_is_mobile() ) {
		return;
	}
	
	if( is_home() ) {

		wp_enqueue_style( 'powertip-css', get_stylesheet_directory_uri() . '/css/jquery.powertip.min.css' );

		wp_enqueue_script( 'powertip', get_stylesheet_directory_uri() . '/js/jquery.powertip.min.js', array( 'jquery' ), '', true );

		wp_enqueue_script( 'powertip-init', get_stylesheet_directory_uri() .'/js/powertip-init.js' , array( 'powertip' ), '1.0.0', true );
	
	}

}

add_action( 'genesis_entry_content', 'vg_show_hide_excerpt', 10 );
function vg_show_hide_excerpt() {
	
	if( is_home() ) {
		
		?>
		<div class="hide-excerpt">
			
			 <?php echo wp_trim_words( get_the_content(), 80 ); ?>
		
		</div>
		<?php

	}
}

Let me know if it works for you!

---

I make WordPress websites using Genesis Framework.

WordPress/Genesis Development | Customizations

[mparks]

I am still having trouble getting this to work... I have replaced what you said in the last post, but it's still not working. No error or anything, just does not show the excerpt on hover.

Any idea on something I may need to check?

Thanks so much for the continue help on this!
Kimberly

[brock]

Works for me! A link to your site might help with debugging, Kimberly. I was able to drop Vajrasar's code in on top of a fresh install of Executive Pro. There was no need to remove anything or comment anything out. The first thing to check is that the javascript is in fact loading on the page.

When you view source, make sure that these scripts are loading:

<script type='text/javascript' src='http://localhost/executive-pro/wordpress/wp-content/themes/executive-pro/js/jquery.powertip.min.js?ver=4.2.2'></script>
<script type='text/javascript' src='http://localhost/executive-pro/wordpress/wp-content/themes/executive-pro/js/powertip-init.js?ver=1.0.0'></script>

Good luck and thanks for the tutorial Vajrasar.

[mparks]

I have checked the source and this is at the very bottom of the code... so it does appear to be running.

The site is http://ca.ei2.org

Thanks for the continued help!

<script type='text/javascript' src='http://ca.ei2.org/wp-content/themes/executive-pro/js/jquery.powertip.min.js?ver=4.2.2'></script>
<script type='text/javascript' src='http://ca.ei2.org/wp-content/themes/executive-pro/js/powertip-init.js?ver=1.0.0'></script>

[mparks]

Hey there,

Update... so I have installed this theme on a new site to play around with this show excerpt feature. I finally got it to work! However, what I am wanting it to do is a little different. I basically set the theme up like the demo version off the StudioPress site. If you go to the site where I want it to work, http://ca.ei2.org Down under the slider, I want the posts that are listed in the 3 panels to have this hover/excerpt feature. Any suggestion on how to do that would be greatly appreciated. Thanks so much for the continued help on this!

Kimberly

[Author]

Posts