jQuery (plugin) DropDown from li w tooltip

by amindunited

HTML

<div class="exampleContainer">
    <div class="dd_ul left">
        <ul>
            <li>Object One</li>
            <li>Object Two</li>
            <li>Object Three</li>
            <li>Object Four</li>
            <li>Object Five</li>
            <li>Object Six</li>
            <li>Object Seven</li>
        </ul>
    </div>
</div>
<div class="exampleContainer">
    <div class="dd_ul right">
        <ul>
            <li>Object One</li>
            <li>Object Two</li>
            <li>Object Three</li>
            <li>Object Four</li>
            <li>Object Five</li>
            <li>Object Six</li>
            <li>Object Seven</li>
        </ul>
    </div>
</div>

<div class="exampleContainer">
    <div class="dd_ul center">
        <ul>
            <li>I'm a sticky one</li>
        </ul>
    </div>
</div>

<div class="exampleThemeWrap"></div>
<div id="ember_123">
    this is the ember popup content!
</div>

CSS

.dd_ul.left ul { list-style:none; float: left;}
.dd_ul.right ul { list-style:none; float: right;}
.dd_ul.center ul { width:200px; margin-left:auto; margin-right:auto; clear:both; }
.dd_ul ul li { 
    width: 200px;
    border:solid 1px gray;
    border-radius: 5px;
}


.tool-tip-template {
    display:none;
    /*position:absolute;*/
    background-color:#48d122;
background: #d6e2cc; /* Old browsers */
background: -moz-linear-gradient(top,  #d6e2cc 1%, #2eb716 60%, #2eb716 91%, #b4e391 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#d6e2cc), color-stop(60%,#2eb716), color-stop(91%,#2eb716), color-stop(100%,#b4e391)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #d6e2cc 1%,#2eb716 60%,#2eb716 91%,#b4e391 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #d6e2cc 1%,#2eb716 60%,#2eb716 91%,#b4e391 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #d6e2cc 1%,#2eb716 60%,#2eb716 91%,#b4e391 100%); /* IE10+ */
background: linear-gradient(to bottom,  #d6e2cc 1%,#2eb716 60%,#2eb716 91%,#b4e391 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6e2cc', endColorstr='#b4e391',GradientType=0 ); /* IE6-9 */


    opacity:0.79;
    padding:10px;
    border-radius:5px;
    box-shadow: 5px 5px 2px #666; 
}
.tool-tip-template .tool-tip-arrow{
    position:absolute;
    width: 24px;
    height:27px;
    background:url('http://css-tricks.com/examples/CSSClip/images/arrow-sprite.png') no-repeat left -10px transparent;
    background-position: 75px -10px;
    background-repeat:no-repeat;
    background-position: 0px -10px;
    
}
.tool-tip-template.left {
    box-shadow: -5px 5px 2px #666;
}
.tool-tip-template.left .tool-tip-arrow {
    background-position: -71px -10px;
    
}
.tool-tip-template.right .tool-tip-arrow {
    background-position: 0px -10px;
}
.tool-tip-template .close-button {
    position:absolute;
    top:2px;
    right:2px;
   ...

JavaScript

/**
 * jQuery SuperSlipToolTip Plugin
 *
 * @author Robin Buckley <[email protected]>
 *
 * @copyright Copyright © Tabcorp Pty Ltd. All rights reserved. http://www.tabcorp.com.au/
 * @license This code is copyrighted and is the exclusive property of Tabcorp Pty Ltd. It may not be used, copied or redistributed without the written permission of Tabcorp.
 *
 *
 * @returns jQuery Element
 *
 * @use
 *
 * //String content:
 * $('.elements').SuperSlipToolTip({content:"this is the content"})
 *
 * //use a function to get content
 * $('.elements').SuperSlipToolTip({content:function(){
 *     return $('#content_source').text();
 * }})
 *
 * Read the defaults below for more options
 *
 * also Note that the code includes a template defined as 'default_template' for use when the plugin cannot find the
 * given template in the page
 */
(function ($) {

	"use strict";

	var defaults = {
		template: ".tool-tip-template",// STRING - jQuery CLASS selector for the html block that will be used as a template for the tool-tip
		parent: "body", // STRING - jQuery selector for the html block that the tool tip will be appendedTo
		template_body: ".tool-tip-body",// STRING - jQuery selector for the CHILD element of the tool-tip that the content will go in
		arrow_element: ".tool-tip-arrow", // STRING - jQuery selector for the CHILD element that will contain the arrow, or pointer
		content: "tool tip!",// STRING or Function that returns the content as a string or html
		delay: 600,// Int - the number of miliseconds before the tooltip appears
		hide_delay: 300,// Int - the number of miliseconds before the tooltip disappears
		open_event: "mouseenter",// STRING - the event that shows the tooltip
		close_event: "mouseleave",//STRING - the event that closes the tooltip
		sticky: false,//BOOLEAN - overrides close event and stays on screen until close button is pressed
		margin: 5,// Int - the distance in pixels between the tip and target
		group: true,// BOOLEAN - constrain these element's...