How JustAnswer Works:
  • Ask an Expert
    Experts are full of valuable knowledge and are ready to help with any question. Credentials confirmed by a Fortune 500 verification firm.
  • Get a Professional Answer
    Via email, text message, or notification as you wait on our site.
    Ask follow up questions if you need to.
  • 100% Satisfaction Guarantee
    Rate the answer you receive.
Ask Steve Your Own Question
Steve
Steve, Consultant
Category: Programming
Satisfied Customers: 289
Experience:  Steve is a consultant in the areas of computer software and programming, information management and networking.
47680681
Type Your Programming Question Here...
Steve is online now

I want to create a tooltip that takes Buddypress profile

Resolved Question:

I want to create a tooltip that takes Buddypress profile data and displays it when you hover over the Buddypress username link.
I have read the following article: How to Display Random BuddyPress Profile Data (or anything else) with Pretty jQuery Tooltips
But I don't understand a couple of the points made:
1. In step 3 the article says to place the jquery tools in header.php. Does it need to be placed above:
2. Step 4 says to initialize the function in the header.php file but there is a typo. Where do you place the code to initialize?
3. Step 5 says to add the CSS. Do I add that to style.css in my child-theme or somewhere else?
4. Step 6 says to add the markup. Do I add the markup to the template file for the page I want the tooltip appear?
Submitted: 11 months ago.
Category: Programming
Customer: replied 11 months ago.
Step 3 Does it need to be placed above: <?php wp_head () ;>
Expert:  Steve replied 11 months ago.

Hi there, my name is***** should be making the edits to the files in your theme, most likely by selecting Appearance and Editor from the WordPress admin menu. If you're using a child theme and the header.php file is not in the child theme directory, you should copy it there from the parent directory. Step 3 also assumes that you also have a file called tooltip.css that's stored in a css folder in your child theme directory.

(1) In the header.php file. Look for the line that says

<head>

On the very next line, add the following:

<script src="https://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory');?>/css/tooltip.css">

(The article left off the </script> in the first line, and you need that for it to run properly)

(2) Add the code from Step 4 immediately under the two lines you just added.

(3) Yes, you can add the CSS from Step 5 into the style.css for your child theme, or, since you're already editing the header file, you can also add it immediately under what you've just added so that all your modifications are in one place. If you add it into the header.php file, however, you need to wrap it in the <style> tag:

<style>

/* mouseover state */ .trigger:hover { background-position:0 -44px ; } /* clicked state */ .trigger:focus { background-position:0 -88px; } /* tooltip styling */ .tooltip { display:none; background:url(images/tooltip/white_big.png); height:133px; padding:40px 30px 10px 30px; width:310px; font-size:13px; color:#fff; } /* a .label element inside tooltip */ .tooltip .label { color:yellow; width:35px; } .tooltip a { color:#ad4; font-size:11px; font-weight:bold; text-decoration: none; }

</style>

If you add it to style.css, you don't need the <style> tags.

(4) Yes, you add the markup to the template file for the page where you want the tooltip to appear.

Please let me know if you have any other questions. If I've answered your question today and solved your issue, can you please accept my answer and rate me accordingly? I don't get paid anything for helping you until you accept my answer. If you're still having trouble, chat me back and I'll help you figure it out. The article makes the process a little confusing. Thanks!

Expert:  Steve replied 11 months ago.

Hi there. I was just following up with you to see if I fully answered your questions. If I did, can you please accept my answer? If not, chat me back and we can discuss it further. Thanks!

Steve and other Programming Specialists are ready to help you

Related Programming Questions