style.css

#root-container {
    width: 80%;
    margin: auto;
}

.button {
    font-size: 2rem;
}

textarea {
    width: 100%;
    resize: vertical;
}

table {
    border-collapse: collapse;
    border: 2px solid rgb(140 140 140);
    font-size: 0.8rem;
    letter-spacing: 1px;
}

td,
th {
    border: 1px solid rgb(160 160 160);
}

#table-container {
    border: 2px solid rgb(0 0 0);
    height: 35vh;
    overflow: scroll;
}

#input-container {
    display: flex;
}

.input-small {
    width: 90px;
}

.tooltip {
    position: relative; /* ツールチップの位置の基準に */
    cursor: pointer; /* カーソルを当てたときにポインターに */
    color: blue;
    /* ツールチップのテキスト */
    .tooltip-element {
        opacity: 0; /* はじめは隠しておく */
        visibility: hidden; /* はじめは隠しておく */
        position: absolute; /* 絶対配置 */
        left: 50%; /* 親に対して中央配置 */
        transform: translateX(-50%); /* 親に対して中央配置 */
        bottom: -30px; /* 親要素下からの位置 */
        display: inline-block;
        padding: 5px; /* 余白 */
        white-space: nowrap; /* テキストを折り返さない */
        font-size: 0.8rem; /* フォントサイズ */
        line-height: 1.3; /* 行間 */
        background: #333; /* 背景色 */
        color: #fff; /* 文字色 */
        border-radius: 3px; /* 角丸 */
        transition: 0.3s ease-in; /* アニメーション */
    }
    table {
        color: #fff;
    }
}

/* ホバー時にツールチップの非表示を解除 */
.tooltip:hover .tooltip-element {
    opacity: 1;
    visibility: visible;
}