when pops up on the picture does not work pop-up window, tooltip

var cvs=document.getElementById("canvas"); var ctx = cvs.getContext("2d"); var im2a19=new Image(); im2a19.src="https://mobimg.b-cdn.net/pic/v2/gallery/111x185/abstrakciya-fon-40429.jpg"; im2a19.id='m124'; im2a19.setAttribute("data-tooltip","Количество"+"\r\n"+"очков"); $(im2a19).on("click", function() { }); document.body.appendChild(im2a19); 
  #m124{ position: absolute; top: 100px; left: 100px; } [data-tooltip]:before, [data-tooltip]:after { opacity: 0; } [data-tooltip]:before { font:18px Arial, Helvetica, sans-serif; position: absolute; bottom: 150%; left: 50%; margin-bottom: 5px; margin-left: -80px; padding: 7px; width: 160px; border-radius: 3px; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tooltip); text-align: center; line-height: 1.2; } [data-tooltip]:after { position: absolute; bottom: 150%; left: 50%; margin-left: -5px; width: 0; border-top: 5px solid #000; border-top: 5px solid hsla(0, 0%, 20%, 0.9); border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0; } [data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 
 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- jquery --> <title></title> </head> <body> <canvas id="canvas" width="1000" height="675"></canvas> <script type="text/javascript"> </script> </body> </html>

  • It does not work, because the img tag cannot have nested elements. - Stepan Kasyanenko am
  • that is, how not to make it work? - Ivan912 1:23 pm
  • You can do anything, within reasonable limits. But this solution based on css is not optimal. - Stepan Kasyanenko 1:38 pm

1 answer 1

The img cannot have nested elements. Accordingly, it is necessary to wrap img , and create a tooltip on the wrapper.

 var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d"); var im2a19 = new Image(); var wrapper = document.createElement('span'); wrapper.appendChild(im2a19); wrapper.id = 'm124'; wrapper.setAttribute("data-tooltip", "Количество" + "\r\n" + "очков"); im2a19.src = "https://mobimg.b-cdn.net/pic/v2/gallery/111x185/abstrakciya-fon-40429.jpg"; $(im2a19).on("click", function() { }); document.body.appendChild(wrapper); 
 #m124 { position: absolute; top: 100px; left: 100px; } [data-tooltip]:before, [data-tooltip]:after { opacity: 0; } [data-tooltip]:before { font: 18px Arial, Helvetica, sans-serif; position: absolute; top: -50px; left: 50%; margin-bottom: 5px; margin-left: -80px; padding: 7px; width: 160px; border-radius: 3px; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tooltip); text-align: center; line-height: 1.2; } [data-tooltip]:after { position: absolute; top: -15px; left: 50%; margin-left: -5px; width: 0; border-top: 5px solid #000; border-top: 5px solid hsla(0, 0%, 20%, 0.9); border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0; } [data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 
 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- jquery --> <title></title> </head> <body> <canvas id="canvas" width="1000" height="675"></canvas> <script type="text/javascript"> </script> </body> </html>