[Q&A] windowの左上角に出ないか？

windowの左上角に出ないか？

解決したいこと

このコードでid=tooltipの位置がなぜこの位置にあるのかわかりません (helpって出てるやつ)
relativeで相対位置を決めているわけでもないのに

発生している問題・エラー

該当するソースコード

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Lesson13</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
  <h1>Tooltip</h1>
  <ul>
    <li><img src="img/icon1.png" width="150" height="150" alt="Information"></li>
    <li><img src="img/icon2.png" width="150" height="150" alt="Help"></li>
    <li><img src="img/icon3.png" width="150" height="150" alt="Contact"></li>
  </ul>
</div>
</body>
</html>

body{
    font-family:Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    background:#E86278;
    text-align:center;
}

h1{
    margin:120px 0;
    color:#F5D228;
    font-size:5em;
    font-weight:bold;
}

li{
    list-style-type:none;
    float:left;
    margin-right:60px;
    cursor:pointer;
    width:150px;
    height:150px;
    background:#F5D228;
    font-size:4em;
    border-radius:75px;
}

li:last-child{
    margin-right:0;
}

ul{
    display:inline-block;
}

#tooltip{
    position:absolute;
    border-radius:10px;
    background:#FFF;
}

#tooltip p{
    text-align:center;
    color:#E86278;
    font-size:2em;
    padding:17px;
}

#tooltip:after{
    content:" ";
    width:0px;
    border-top:18px solid #FFF;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    position:absolute;
    left:50%;
    margin-left:-8px;
}

$(function(){
  $("li").hover(function(){
    $("body").append('<div id="tooltip"><p></p></div>');
    $("#tooltip p").html($(this).children().attr("alt"));
  }, function(){

  });
 });

例）

def greet
  puts Hello World
end

自分で試したこと

ここに問題・エラーに対して試したことを記載してください。

2Answer

@itagagaki posted at 2021-09-18

topとleftのデフォルトはautoであり、0ではありません。
そのことにより実際にどのように配置されるのかまでは私にはちょっとわかりません。
下記ドキュメントを詳しく読めばたぶんわかるのでしょうが。
まあ、左上にしたければtopとleftに0を設定することですね。

Visual formatting model

@fhx93d posted at 2021-09-19

tooltipを表示している処理に

const tooltip = window.getComputedStyle(document.querySelector("#tooltip"));
console.log(tooltip.top, tooltip.left);

とでも追記して確認すれば、何故その位置に表示されているか分かるかと思います。