$(document).ready(function() {

    // Create a toolTip manager
    var myToolTipManager = new TVI.ToolTipManager({
        tipDefaults: {
            position: 'right',
            relativeXpos: 'right',
            relativeYpos: 'middle',
            width: 230,
            offsetX: -15
        },
        skinDefaults: {

            usesPng: true,
            contentTemplate: '${content}',

            toolTipClass: 'staffProfileTip',
            topMiddleClass: 'topMiddle',
            middleClass: 'middle',
            bottomMiddleClass: 'bottomMiddle',

            outerLeftWidth: 0,
            outerRightWidth: 0,
            outerTopHeight: 6,
            outerBottomHeight: 9,

            pointerRightWidth: 14,
            pointerRightHeight: 22,
            pointerRightPointX: 1,
            pointerRightPointY: 8,
            pointerRightXOffset: 3,
            pointerRightYOffset: 0,
            pointerRightClass: 'pointerRight'
        }
    });
    
    $("li[id^='staffProfile-']").hover(
        function() {
            var number = $(this).attr('id').replace('staffProfile-', '');

            var content = $('#staffProfileDetails-' + number).html();

            var myTooltip = myToolTipManager.addTip({
                id: 'staffProfileTip-' + number,
                relativeTo: 'staffProfile-' + number,
                content: content
            });
        },
        function() {
            myToolTipManager.hideAllTips();
        }
    );

});