JavaScript >> Javascript 文檔 >  >> Tags >> CSS

使用一點 CSS 為您的網站創建內聯幫助提示

創建 Web 應用程序時,您通常需要向人們提供友好的幫助提示,以解釋您界面的某些部分。做到這一點的方法之一是有單獨的頁面,其中包含您鏈接到的幫助主題。然而,這會導致人們失去他們正在做的事情的背景,並且對用戶不是很友好。

更好的方法是在需要的地方顯示幫助文本。以下是僅使用一些 CSS 規則和一點點 HTML 的方法!

HTML

第一步是編寫工具提示的標記。這是它的樣子:

<div class="help-tip">
    <p>This is the inline help tip! It can contain all kinds of HTML. Style it as you please.</p>
</div>

<p> 元素顯示為黑色工具提示,.help-tip div 是帶問號的藍色圓圈。

該段落默認隱藏,僅在懸停時顯示。它可以包含鏈接、圖像和其他類型的 HTML。從演示中可以看出,它以流暢的 CSS 動畫顯示。

CSS

這一切都可以在一點 CSS 的幫助下實現(您可以在 style.css 中找到它 在可下載的 zip 中,鏈接到文章開頭的按鈕):

.help-tip{
    position: absolute;
    top: 18px;
    right: 18px;
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.help-tip:before{
    content:'?';
    font-weight: bold;
    color:#fff;
}

.help-tip:hover p{
    display:block;
    transform-origin: 100% 0%;

    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{    /* The tooltip */
    display: none;
    text-align: left;
    background-color: #1E2021;
    padding: 20px;
    width: 300px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    right: -4px;
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
}

.help-tip p:before{ /* The pointer of the tooltip */
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:#1E2021;
    right:10px;
    top:-12px;
}

.help-tip p:after{ /* Prevents the tooltip from being hidden */
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:-40px;
    left:0;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
    0% { 
        opacity:0; 
        transform: scale(0.6);
    }

    100% {
        opacity:100%;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}

Chrome 仍然需要關鍵幀動畫的 -webkit 前綴,因此我們提供了兩個版本。此動畫從右上角縮放元素(感謝第 23 行的 transform-origin)並為不透明度設置動畫。它是在懸停時觸發的,因此當您將鼠標懸停在工具提示上時,它會停留在屏幕上。

需要注意的是,顯示帶有問號的藍色圓圈的容器元素,必須設置為position:relative , 以便圓圈出現在右上角。

我希望這個快速提示對您有所幫助,並且您會在您的網絡應用程序中找到它的用途!


Tutorial JavaScript 教程
  1. 討論:將 CSS 添加到 React/Next.js 項目的最佳方法是什麼?

  2. 如何使用 TypeORM 在 MySQL 中保存 JSON 數組

  3. 阿拉伯語的 Alexa

  4. 如何不製作 PAC-MAN

  5. 很好地要求我們的用戶通過 XSS 攻擊更新應用程序

  6. 我覺得編程要學的東西太多了

  7. 按值複製與按引用複制

  1. Node.js 和 Firebase:生成電子郵件驗證鏈接

  2. 如何使用 React + Next JS 構建 Todo 應用

  3. 使用 Sails.js 構建實時聊天應用程序

  4. Discord 聊天機器人 🤖 與 IBM Watson

  5. 用透明度疊加兩個圖像

  6. 在 Angular 中處理從 Observables 發出的虛假值

  7. JS文件上傳:檢測編碼

  1. 使用 Node.js 簡化與 PostgreSQL 數據庫的安全連接

  2. 🏗 瀏覽器渲染引擎結構

  3. 個人項目 - cmpct.io

  4. 修復節點應用程序中的內存洩漏