Untitled



ui: {
            tooltip: function() {

                // Globals
                var tooltip = $('<div id="tooltip" class="tooltip"><div class="content"></div><div class="arrow"></div></div>');
                var offsetLeft = 28;
                var offsetTop = -14;
                var offsetRight = -34;
                var closeTimer;
                var arrow = tooltip.find('div.arrow');

                // bind events
                tooltip.bind({
                    'tooltip.show': function(event) {

                        var element = event.elem;

                        // store element in tooltip data, used for close function.
                        tooltip.data('element', element);

                        //var title = element.attr('title');
                        var hasHiddenContent = element.hasClass('has-tooltip-content');
                        var hasRightArrow = element.hasClass('tooltip-icon-right');
                        var content = element.parent().find('div.tooltip-content').html();
                        var contentContainer = tooltip.find('div.content');
                        // find and set the tooltip content title
                        //tooltip.find('h6').text(title);

                        // find and set the content of the tooltip.
                        contentContainer.html(content);

                        if (hasRightArrow) {
                            myOffsetLeft = (element.width() - tooltip.width()) + offsetRight;
                            arrow.addClass('tooltip-arrow-right');
                        } else {
                            arrow.removeClass('tooltip-arrow-right');
                            myOffsetLeft = offsetLeft;
                        }

                        // copy the elements position and set it to the tooltip.
                        DR.utils.clonePosition(element, tooltip, { top: offsetTop, left: myOffsetLeft });

                        element.addClass('tooltip-active');


                        var tooltipWidth = contentContainer.width();
                        var tooltipMaxWidth = 200;
                        if (tooltipWidth > tooltipMaxWidth) contentContainer.width(tooltipMaxWidth);

                        tooltip.fadeIn();


                    },
                    'tooltip.hide': function(event) {
                        closeTimer = setTimeout(function() {
                            tooltip.data('element').removeClass('tooltip-active');
                            tooltip.hide();
                        }, 1);
                    },
                    mouseleave: function() {
                        tooltip.trigger('tooltip.hide');
                    },
                    mouseenter: function() {
                        clearTimeout(closeTimer);
                    }
                });

                // inject tooltip html at end of body.
                $('body').append(tooltip);

            },


// Tooltip
        $('a.tooltip').live('mouseover', function() {
            var element = $(this);
            var tooltip = $('#tooltip');
            tooltip.trigger({
                type: 'tooltip.show',
                elem: element
            });
        }).live('mouseout', function() {
            var tooltip = $('#tooltip');
            tooltip.trigger({
                type: 'tooltip.hide'
            });
        });

        // Create tooltip.
        DR.ui.tooltip();

        // Init preview window for create ad image/text section.
        DR.ui.previewWindow();

    });


</head>
<body onload="init()">

    <div class="mapButtons">
         <a href="#" class="tooltip">
            <button class="hand" onclick="window.map.activatePanTool({zoomWheelEnabled : true})" >
                <div class="tooltip-content">
                    <span class="leftTooltipBg"></span><span class="repeatedTooltipBg">Tooltip text here</span><span class="tooltipRightBg"></span>
                 </div>
             </button>
         </a>