// JavaScript Document

// Only create tooltips when document is ready
$(document).ready(function()
{





    $("#first").qtip(
        {
        content: $("#firsttip"),
        position: {
            corner: {
                target: 'bottomMiddle',
                tooltip: 'topLeft'
            }
        },
        show: { effect: { length: 0 }, delay: 0 },
        hide: { effect: { length: 0 } },
        style: {
            name: 'red',
            padding: 10, 
            border: {
                width: 5,
                radius: 8
            },
            tip: {
                corner: 'topLeft',
                size: {
                    x: 20,
                    y : 20
                }
            },
            width: 360
        }
        });
        
    $("#second").qtip(
        {
        content: $('#secondtip'),
        position: {
            corner: {
                target: 'bottomMiddle',
                tooltip: 'topMiddle'
            }
        },
        show: { effect: { length: 0 }, delay: 0 },
        hide: { effect: { length: 0 } },
        style: {
            name: 'green',
            padding: 10, 
            border: {
                width: 5,
                radius: 8
            },
            tip: {
                corner: 'topMiddle',
                size: {
                    x: 20,
                    y : 20
                }
            },
            width: 350
        }
        });

     $("#third").qtip(
        {
        content: $("#thirdtip"),
        position: {
            corner: {
                target: 'bottomMiddle',
                tooltip: 'topMiddle'
            }
        },
        show: { effect: { length: 0 }, delay: 0 },
        hide: { effect: { length: 0 } },
        style: {
            name: 'red',
            padding: 10, 
            border: {
                width: 5,
                radius: 8
            },
            tip: {
                corner: 'topMiddle',
                size: {
                    x: 20,
                    y : 20
                }
            },
            width: 390
        }
        });

    $("#fourth").qtip(
        {
        content: $("#fourthtip"),
        position: {
            corner: {
                target: 'bottomMiddle',
                tooltip: 'topRight'
            }
        },
        show: { effect: { length: 0 }, delay: 0 },
        hide: { effect: { length: 0 } },
        style: {
            name: 'green',
            padding: 10, 
            border: {
                width: 5,
                radius: 8
            },
            tip: {
                corner: 'topRight',
                size: {
                    x: 20,
                    y : 20
                }
            },
            width: 300
        }
        });
        
        


});