Tooltip not working with my css

Question

Why doesn't my tooltip work with my css in here? http://jsfiddle.net/BG4Sn/

Please see the jsfiddle, the problem is, that with my css included, the tooltip won't show up true box tooltip after mouse enter on links tooltip1 & tooltip2 & tooltip3 . When I remove the link to my css in the html head, it works true.

function tool_tip() {
        //var tip = $('.tool_tip').closest('li').find('div').clone();
        $('.tool_tip').mouseenter(function () {
            var $this = $(this),
                $div = $this.closest('li').find('div');
            $(this).attr('title', '');
            $div.fadeTo(300, 0.9);
        }).mousemove(function (e) {

            $('.tooltip').css('bottom', e.pageY + -10);
            $('.tooltip').css('left', e.pageX + 10);

        }).mouseleave(function () {
            $('.tooltip').hide();
        })
    }
tool_tip();

Answer 1

The CSS being applied to .tooltip in your style_s.css is different from your JSFiddle. Copy and paste this .tooltip style into style_s.css:

.tooltip {
    background-color: #E5F4FE;
    display: none;
    padding: 5px 10px;
    background-color: #E5F4FE;
    border: #5A5959 1px solid;
    position: fixed;
    z-index: 9999;
    color: #0C0C0C;
    font-size: 0.688em;
}

Then linking to style_s.css will produce the same style.