Offer your readers quick access to author bio. Follow the tutorial to add a tooltip which will popup on mouseover of author name or link. We will be using TinyTips 1.1 for the tooltips.

1. Add the following code between posts loop. You can edit the Posted by <?php the_author_posts_link(); ?> part from the code to match with your layout.

<span class='authorBio' title='<?php the_author_meta('description', $post->post_author); ?>'>Posted by <?php the_author_posts_link(); ?></span>

2. Download & Extract Tiny Tips 1.1 – Mirror

3. Copy & Paste jquery.tinyTips.js to your theme folder.

4. Add the following code to the end of style.css located in your theme folder:

.lightTip .content { width: 310px; padding: 10px; border: 6px solid #e2e2e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #ffffff; color: #020202; }
.lightTip .bottom { height: 14px; background: url('notch-white.png') top center no-repeat; }

5. Copy notch-white.png from demo\images folder from TinyTips package and paste it to your theme folder.

6. Edit header.php and add the following code BEFORE wp_head(); function:

<?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('TinyTips', get_bloginfo('template_directory').'/jquery.tinyTips.js', 'jquery', '1.1'); ?>

7. Add the following code directly before tag:

<script type='text/javascript'>
jQuery(document).ready(function() {
	jQuery('.authorBio').tinyTips('light', 'title');
});
</script>

Keep In Touch

Leave your suggestions and comments below, and don’t forget to subscribe to our RSS Feed and follow us on Twitter to stay updated.