ユーザーが要素のボックスの影の上にカーソルを置いたときにツールチップを表示するにはどうすればよいですか？

Question

私は1x1pxの要素を持っていますが、はるかに大きなボックスの影があります。 私は、ユーザーが移動するたびにツールチップを表示したいのですが、ユーザーが1x1 px領域を横切って巨大なボックスの影を無視したときにのみ、ツールチップがアクティブになるという問題があります。

このフィドルの青い要素（グロー）が一例です。私はちょうどツールチップがどのように見えるかを示すために緑の要素（glow2）を大きくしてみました。

https://jsfiddle.net/fortunette/fLm3d7oz/1/

.glow { 

     width: 1px; 
     height: 1px; 
     background-color: blue; 
     border-radius: 50%; 
     box-shadow: 0 0 24px 19px blue; 
     position:absolute; 
     top:300px; 
     left:100px; 
    } 

その他の要件は、任意の位置およびサイズで、これらの白熱要素の任意の数が存在することです。

Answer 1

pseudo-elementsは、ボックスシャドウを含むdivの全領域と同じサイズです。

擬似要素のオーバーレイは、の透明なです。次に:hoverの状態を擬似要素に使用してツールチップをトリガーします。

の作業例：

.glow { 
 
    width: 1px; 
 
    height: 1px; 
 
    background-color: blue; 
 
    border-radius: 50%; 
 
    box-shadow: 0 0 24px 19px blue; 
 
    position: relative; 
 
    margin: 2em; 
 
} 
 

 
.glow:after { 
 
    content: ""; 
 
    display: block; 
 
    height: 50px; 
 
    width: 50px; 
 
    position: absolute; 
 
    top: -25px; /* needs to be half of height and width */ 
 
    left: -25px; /* needs to be half of height and width */ 
 
    border-radius: 50%; 
 
} 
 

 
.tooltip { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-bottom: 1px dotted black; 
 
} 
 

 
.glow .tooltiptext { 
 
    display: none; 
 
    width: 120px; 
 
    background-color: black; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 5px 0; /* Position the tooltip */ 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
.glow:hover:hover .tooltiptext { 
 
    display: block; 
 
}

<div class="glow"><span class="tooltiptext">Tooltip text</span></div>

Answer 2

ボックスシャドウはボックスHTML要素の一部ではないため、あなたのツールチップが表示されないのはその理由です。私はあなたがdivであなたの箱を包んで、あなたのボックスの影を含んでいる外側のdivのツールチップを使用することをお勧めします。 もちろん、外側のdivにパディングを追加する必要があります。そのため、ボックスの影が完全に含まれています。この方法で、ユーザーがボックスの影にカーソルを置くと、実際には外側のdivの上にカーソルが置かれ、ツールチップが表示されます。どのくらいの詰め物が必要かを確認するには、Google Chromeの開発ツール（Ctrl + Shift + i）を使用できます。外側divクラスのa：hoverまたはJqueryUIのツールチップを使用します。お役に立てれば！