Spotlight Yapımı Jquery

    <link rel="stylesheet" href="style.css">
    <script src="jquery.min.js"></script>
    <script src="js.js"></script>

<div class="kutu">
        Kutucuk
        <div class="tooltip">Buraa Dikkat</div>
    </div>
---------------


css
.kutu{
    width: 150px;
    height: 35px;
    border-radius: 3px;
    box-shadow: 3px 3px rgba(0,0,0,.5);
    position: absolute;
    left: 250px;
    top: 80px;
    background: magenta;
    text-align: center;
    color: white;
    line-height: 33px;
    font-size: 21px;
}
.tooltip{
    display: none;
    background: #FF00FF;
    padding: 7px;
    color: white;
    margin-top: 10px;
}
.tooltip:after{
    border-color: #FF00FF transparent transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-style: solid;
    border-top: 14px solid #FF00FF;
    content: "";
    left: 60px;
    position: absolute;
    top: 90px
}
-----------------
jquery
$(document).ready(function($) {
   
    $(window).load(function() {
        $("html").css('background', "rgba(0,0,0,.5)");
        $(".kutu").hover(function() {
            $(".tooltip").css('display', 'inline-block');
        }, function() {
            $(".tooltip").css('display', 'none');
        });
    });

    $("html").click(function(event) {
        $("html").css('background', "white");
        $(".tooltip").css('display', 'none');
    });

    setInterval(function(){
        if ($("html").css('background', "rgba(0,0,0,.5)")) {
            $(".kutu").hover(function() {
                $(".tooltip").css('display', 'none');
            });
        $("html").css('background', "white");
        };
    },3000);

});