"How to Install WordPress on Your Computer" was retired on November 30, 2017. You are now viewing the recommended replacement.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by William J. Terrell
William J. Terrell
17,403 Points

Tooltips

I have the following code on one of my webpages:

<div class="loop-12">
    <!-- This is the Main Container -->


    <div class="accordion loop-12">
        <div class="accordion-item">
            <div class="accordion-heading">
                <h3 class="icon-arrow-swop">What software/systems will I use in
                my program of study?</h3>
            </div>
            <!-- End Accordion Heading -->


            <div class="accordion-content" style="display: none;">
                <table class="responsive-table">
                    <thead>
                        <tr>
                            <th>Program</th>

                            <th>Software / Systems</th>
                        </tr>
                    </thead>


                    <tbody>
                        <tr>
                            <td data-title="Program:" data-type="">Online
                            Bachelor of Science in Business Administration</td>

                            <td data-title="Software / Systems:" data-type="">
                            Owlnet / Moodle</td>
                        </tr>


                        <tr>
                            <td data-title="Program:" data-type="">Online
                            Bachelor of Science in Paralegal Studies</td>

                            <td data-title="Software / Systems:" data-type="">
                            Owlnet / Moodle / Law Office Simulator</td>
                        </tr>


                        <tr>
                            <td data-title="Program:" data-type="">Online
                            Bachelor of Science in Interpretation Studies in
                            ASL-English Degree</td>

                            <td data-title="Software / Systems:" data-type="">
                            Owlnet / Moodle</td>
                        </tr>


                        <tr>
                            <td data-title="Program:" data-type="">Online
                            Master of Business Administration (MBA) in
                            Entrepreneurial Leadership</td>

                            <td data-title="Software / Systems:" data-type="">
                            Owlnet / Moodle</td>
                        </tr>


                        <tr>
                            <td data-title="Program:" data-type="">Online
                            Master of Education (MEd) in Equestrian
                            Education</td>

                            <td data-title="Software / Systems:" data-type="">
                            Owlnet / Moodle</td>
                        </tr>


                        <tr>
                            <td data-title="Program:" data-type="">Online
                            Master of Education (MEd) in Teaching and
                            Technology</td>

                            <td data-title="Software / Systems:" data-type="">
                            Owlnet / Moodle / Tk20</td>
                        </tr>


                        <tr>
                            <td data-title="Program:" data-type="">Online
                            Master of Education (MEd) in Athletics / Activities
                            Administration</td>

                            <td data-title="Software / Systems:" data-type="">
                            Owlnet / Moodle / Tk20</td>
                        </tr>


                        <tr>
                            <td data-title="Program:" data-type="">Online
                            Master of Education (MEd) in Curriculum and
                            Instruction</td>

                            <td data-title="Software / Systems:" data-type="">
                            Owlnet / Moodle</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- End Accordion Content -->
        </div>
        <!-- End Accordion Item -->
    </div>
    <!-- End Accordion Loop-12 -->
</div>
<!-- End Main Container Class Loop-12 -->

It's a table that shows what different software systems are used with certain academic programs. What I would like to do is set it up so that, when a user hovers over one of the items in the "Software / Systems" column, a tool-tip will appear, which contains more information about that program.

I'm not sure where to start out, though... I assume that, since the same programs are listed multiple times, the best option would be to create a class and set it up so that when an item of that class is hovered over, the tool-tip appears. Maybe apply that class to a span wrapped around the text for each individual program? (since multiple different programs appear in a single td)

Any assistance or insight would be appreciated.

Thanks!

Sharon Kearney
Sharon Kearney
8,662 Points

Bootstrap has tooltips in the Javascript.

1 Answer

elk6
elk6
22,916 Points
elk6
elk6
22,916 Points

Are you familiar with Jquery? Because i would be looking there if i were you. Jquery is excellent for these kind of hover effects. You csn create a span, set it to display none ( or even opacity: 0 ) and with JQuery you can select the hover state and change the css to display the way you want it, or opacity: 1. Set a transition with CSS and you will have a nice effect.

Several ways to do this. :)

William J. Terrell
William J. Terrell
17,403 Points

I hate to say it, but I'm terribly inept... I was thinking, though, that I could store the text that I want the tool tip for each program to say into variables, like this:

var emailInfo = "Your William Woods Email account will be your primary means of getting important updates and corresponding with William Woods University faculty and staff."

var owlnetInfo = "Owlnet is William Woods' Online portal. You can use it to access schedules, accept financial aid awards, view grades and statements."

var moodleInfo = "Moodle is William Woods' online course delivery system. You can use it view syllabus for class and interact (online only)."

var tk20Info = "Tk20 is a portfolio software used to store projects throughout your course. These projects will make up a portfolio, which will be reviewed at the end of your course."

and then use jQuery to apply those variables to the title attribute for each item... At the moment, though, as far as actually implementing it, I'm drawing blanks...

Thanks!

William J. Terrell
William J. Terrell
17,403 Points

It also helps, I suppose, if you put the code in the right place ^^; I tried this code and it seems to have done the trick (once I put it in the right place):

$( ".emailInfo" ).attr( "title", "Your William Woods Email account will be your primary means of getting important updates and corresponding with William Woods University faculty and staff." );

    $( ".owlnetInfo" ).attr( "title", "Owlnet is William Woods' Online portal. You can use it to access schedules, accept financial aid awards, view grades and statements." );

    $( ".moodleInfo" ).attr( "title", "Moodle is William Woods' online course delivery system. You can use it view syllabus for class and interact (online only)." );

    $( ".tk20Info" ).attr( "title", "Tk20 is a portfolio software used to store projects throughout your course. These projects will make up a portfolio, which will be reviewed at the end of your course." );

It's not exactly pretty, though; it just uses the browser's default tool-tip styling, but it's a step in the right direction. :)

Thanks!