CSS 在<span>元素</span>上懸停時顯示信息框

Question

我想在我的 React 應用程序中實現一個功能，在該應用程序中，您在<span>元素上 hover ，然后在<span>元素上出現一個InfoBox 。

例如，當您 hover 您的 cursor 在變量上時，它應該看起來像在 Visual Studio 代碼中。

該框的行為應與我繪制的以下草圖中的行為相同（基本上與 VSCode 中的行為相同）： InfoBox 是包含This text的框。 <span>包含你好

不幸的是，我不是 CSS 方面的專家，我什至不知道這是否僅適用於 CSS 或者您是否也必須使用 javascript。

Answer 1

這是你想要的？

你在hover上面的一些文字和下面的文字出現了嗎？

 .thisText >.hello { display: none; }.thisText:hover >.hello { display: block; }

 <span class="thisText"> This Text <span class="hello"> Hello </span> </span>

Answer 2

這可能會有所幫助：

.thisText{
  position:relative;
  top: 20px;
 }

.thisText > .hello{
  display: none;
}

.thisText:hover> .hello {
  display: block;
  position:absolute;
  top:-20px;
}

<span class="thisText">
This Text
  <span class="hello">
    Hello
  </span>
</span>

Answer 3

我正在研究類似的事情，所以想我可能會分享我最終得到的結果。

如果您將 go 切換到Help > Toggle Developer Tools ，它會打開開發工具，就像在側面的 Chrome 中一樣。 似乎大多數基於 Electron 的應用程序都有這個（盡管Ctrl + Shift + I - 我在 Windows 上 - 在 VS Code 上對我不起作用。需要通過上述方法通過鼠標打開它）。

然后，您可以使用開發工具查看 HTML、JavaScript 和 CSS 用於使顯示的 UI 成為可能。 我在底部打開了控制台選項卡，以便我可以在使用鼠標 hover 的同時在上面輸入內容，然后我在控制台中輸入debugger命令以暫停 JS 執行或其他內容（不要引用我的話） . 關鍵是它會暫停所有內容的 state，這樣您就可以保留使用 JavaScript 創建的工具提示。

似乎它只是標准的工具提示定位， display: block和position: fixed ，以及max-width ， top和left由計算的 JavaScript 設置。 還有一個由 class 選擇器設置的z-index規則，但這在樣式表上。

element.style {
    position: fixed;
    display: block;
    visibility: inherit;
    max-width: 1152px;
    top: 85px;
    left: 147px;
}

我個人會使用position: absolute而不是fixed 。 我猜他們在 Visual Studio Code 中使用了fixed ，因為他們在每個“拆分視圖”（窗口）內計算 position 的方式，因為被覆蓋的 CSS 樣式表確實使用position: absolute

.monaco-hover {
    cursor: default;
    position: absolute;
    overflow: hidden;
    z-index: 50;
    user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    box-sizing: initial;
    animation: fadein .1s linear;
    line-height: 1.5em;
}

我認識到這並不能完全回答問題（沒有關於如何獲取或設置尺寸），但我知道從這里開始我需要自己在哪里 go，對於這些答案，我認為你可以 go 根據是否在其他地方尋找答案你正在編寫 vanilla JS，或者使用一些框架（在這種情況下，可能有更簡單的方法來獲取、計算和設置這些東西）。