There are blocks of fixed width and height, for example 100px. They all stand in order, one by one {float: left;}. There can be any number of such blocks. Now when I hover on one of these blocks, the information block should appear next to, roughly speaking, a little below the cursor. There will be described information about the unit to which I directed. Here is

$("body").on("mouseover", "[data-info]", function() { $("#" + $(this).data("info") + "").addClass("active"); }); $("body").on("mouseout", "[data-info]", function() { $("#" + $(this).data("info") + "").removeClass("active"); }); 
 .div { float: left; color: #333; width: 100px; height: 100px; border: 1px solid #000; } .div:hover { color: blue; border: 1px solid blue; cursor: pointer; } .info { width: 100px; height: 100px; display: inline-block; background: #eee; opacity: 0; } .info.active { opacity: 1; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div data-info="log1" class="div">№1</div> <div data-info="log2" class="div">№2</div> <div id="log1" class="info">Блок 1</div> <div id="log2" class="info">Блок 2</div>

I did something similar, but the problem is that the info blocks appear somewhere at the end.

And should appear something like this:

And should appear somehow

I understand that I just need to properly configure the styles for info-blocks, but I don’t know how. Tell me please.

    1 answer 1

    You need to apply position: absolute; to the class .info .

    You also need to track the movement of the mouse and apply them to the tooltip:

     const offset = 14; var mouseX; var mouseY; $(document).mousemove( function(e) { mouseX = e.pageX; mouseY = e.pageY; }); $("body").on("mousemove", "[data-info]", function() { $("#" + $(this).data("info")).css({'top':mouseY+offset,'left':mouseX+offset}).fadeIn('slow'); });

    Also offset is the offset value relative to the cursor.

    What happened in the end:

     const offset = 14; var mouseX; var mouseY; $(document).mousemove( function(e) { mouseX = e.pageX; mouseY = e.pageY; }); $("body").on("mouseover", "[data-info]", function() { $("#" + $(this).data("info")).addClass("active"); }); $("body").on("mousemove", "[data-info]", function() { $("#" + $(this).data("info")).css({'top':mouseY+offset,'left':mouseX+offset}).fadeIn('slow'); }); $("body").on("mouseout", "[data-info]", function() { $("#" + $(this).data("info")).removeClass("active"); }); 
     .div { float: left; color: #333; width: 100px; height: 100px; border: 1px solid #000; } .div:hover { color: blue; border: 1px solid blue; cursor: pointer; } .info { width: 100px; height: 100px; display: inline-block; background: #eee; opacity: 0; position: absolute; } .info.active { opacity: 1; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div data-info="log1" class="div">№1</div> <div data-info="log2" class="div">№2</div> <div id="log1" class="info">Блок 1</div> <div id="log2" class="info">Блок 2</div>

    • Thank you very much!!! - Vitaliy Fesyura