Overview

Connect User Interface is a web-based interactive map that helps instructors' and students' to understand the interface in Connect. I created four user interface maps so far. *Note- You need an access to the wp-training01 site in order to access to the URL below:

My UBC User Interface: http://elearning.ubc.ca/connect/introduction-to-the-connect-environment/my-ubc-tab-environment/
Course Environment for Instructors: http://elearning.ubc.ca/connect/introduction-to-the-connect-environment/instructor-course-environment/
Course Environment for Students: http://elearning.ubc.ca/connect/introduction-to-the-connect-environment/student-course-environment/
Content Collection: http://elearning.ubc.ca/connect/introduction-to-the-connect-environment/content-collection-environment/

How to Use

I created this user interface map based on Image map with CSS3 & jQuery tooltips by Red Team.

Below is a brief overview of how this works:

The recommended width for the screenshot is 741px. If the width is bigger than this, the pop up explanation might get chopped off.

If you want to add more "?" mark tooltips, add the code below:

<div class="pin pin-down" data-xpos="add a value here(for ex:72)" data-ypos="add a value here(for ex:100)">
<h2>Put the title here</h2>
<ul>
	<li>Put the explanation here</li>
</ul>

CSS

Below is the CSS file of the tooltip with an explanation. Put this CSS code into custom CSS of your site.


.explanation{
  text-align:left;
}


#map-wrapper {
    position: relative;
    margin: 50px auto 20px auto;
    border: 1px solid #fafafa;
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.5);
    box-shadow: 0 3px 3px rgba(0,0,0,.5);
}





.pin {
    display: none;
}


/*Styling of how the Connect "?" tooltip look*/
.tooltip-up, .tooltip-down {
    position: absolute;
    width: 36px;
    height: 51px;
  background-image:url("http://wp-training01.sites.olt.ubc.ca/files/2012/06/navigation-01.png");
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    margin-left: -10px;
    border-bottom: 10px solid #fff1d3;
    border-left: 10px solid transparent;
    border-right :10px solid transparent;
}
/*Styling of the popup explanation*/
.tooltip {
    display: none;
    width: 200px;
    cursor: help;
    text-shadow: 0 1px 0 #fff;
    position: absolute;
    top: 40px;
    left: 50%;
    z-index: 999;
    margin-left: -115px;
  margin-top:-40px;
    padding:15px;
    color: #222;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 3px 0 rgba(0,0,0,.7);
    -webkit-box-shadow: 0 3px 0 rgba(0,0,0,.7);
    box-shadow: 0 3px 0 rgba(0,0,0,.7);
    background: #fff1d3;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff1d3), to(#ffdb90));
    background: -webkit-linear-gradient(top, #fff1d3, #ffdb90);
    background: -moz-linear-gradient(top, #fff1d3, #ffdb90);
    background: -ms-linear-gradient(top, #fff1d3, #ffdb90);
    background: -o-linear-gradient(top, #fff1d3, #ffdb90);
    background: linear-gradient(top, #fff1d3, #ffdb90);       
-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;     
}



.tooltip-down .tooltip {
    bottom: 12px;
    top: auto;
}

.tooltip-down .tooltip::after {
    bottom: -10px;
    top: auto;
    border-bottom: 0;
    border-top: 10px solid #ffdb90;
}

/*Change how the title of the pop up explanation looks*/
.tooltip h2 {
    font: bold 1.3em 'Trebuchet MS', Tahoma, Arial;
    margin: 0 0 10px;
}

.tooltip ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

Javascript

Below is the code of the Javascript. You are going to paste it on the custom javascript section of the page you want to put the Connect User Interface.

jQuery(document).ready(function($){

    // set the map-wrapper width and height to match the img size
    $('#map-wrapper').css({'width':$('#map-wrapper img').width(),
                      'height':$('#map-wrapper img').height()
    })
                 
    for (i=0; i<$(".pin").length; i++)
    {
        // store initial tooltips contents within an array
        var tooltipContent = new Array();
        tooltipContent[i] = $(".pin").eq(i).html();
        
        // set tooltip direction type - up or down
        var tooltipDirection = 'tooltip-up';             
        if ($(".pin").eq(i).hasClass('pin-down'))
        {
            tooltipDirection = 'tooltip-down';
        }
    
        // append the tooltip
        $("#map-wrapper").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\
                                            <div class='tooltip'>" + tooltipContent[i] + "</div>\
                                    </div>");
    }    
    
    // show/hide the tooltip
    $('.tooltip-up, .tooltip-down').mouseenter(function(){
                $(this).children('.tooltip').fadeIn(100);
            }).mouseleave(function(){
                $(this).children('.tooltip').fadeOut(100);
            })
});