工具提示：CSS：我創建了一個基於CSS的文字前綴，如在此之前

Question

：

.staff-only:before { 
    font-family: "FontAwesome"; 
    content: "\f023"; /* padlock */ 
} 

它顯示在文本前面的掛鎖，表明該文本是祕密的。我想顯示一條提示（又名工具提示或HTML5標題），閱讀「只顯示給工作人員」，當用戶將鼠標懸停在掛鎖上時會顯示該提示。我怎麼能實現它？

完整的示例 因此與評論的幫助到目前爲止，我已經得到了（卡）在這裏：

.staff-only { 
 
    background-color: #c1ebf3; 
 
    color: #808080; 
 
    padding-left: -2px; 
 
    padding-right: 0.2em; 
 
    border-radius: 3px; 
 
} 
 
.staff-only:before { 
 
    font-family: "FontAwesome"; 
 
    content: "\f023"; /* padlock */ 
 
    color: silver; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
} 
 
.staff-only:after { 
 
    font-family: "FontAwesome"; 
 
    content: "\f13e"; /* open padlock */ 
 
    color: silver; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
} 
 
.staff-only:hover .tooltiptext { 
 
    visibility: visible; 
 
} 
 
.staff-only .tooltiptext { 
 
    visibility: hidden; 
 
    background-color: rgba(255,255,255,0.5); 
 
    color: darkred; 
 
    text-align: center; 
 
    padding: 5px 5px; 
 
    border-radius: 6px; 
 
    border-style: solid; 
 
    border-width: thin; 
 
    width: 0; 
 

 
    position: relative; 
 
    z-index: 1; 
 
    top: -25px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<p> 
 
    <span class="staff-only"> 
 
     Secret text 
 
     <span class="tooltiptext">Tooltip text</span> 
 
    </span> 
 
</p>

這是我得到的。屏幕截圖顯示了兩條評論，一條公共和一條員工專用。問題在於來自僅限員工的評論的右側空白空間，這似乎適合工具提示文本。無法應付它:(

Answer 1

謝謝大家的幫助。最後，我找到了一個真正優雅的解決方案：使用title屬性：

從HTML 5.1標準：

標題屬性表示元素的參考信息，如將適合的工具提示。 ......在一段中，它可能是對案文的腳註或評註;

.staff-only { 
 
    background-color: #c1ebf3; 
 
    color: #808080; 
 
    padding-left: -2px; 
 
    padding-right: 0.2em; 
 
    border-radius: 3px; 
 
} 
 
.staff-only:before { 
 
    font-family: "FontAwesome"; 
 
    content: "\f023"; /* padlock */ 
 
    color: silver; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
} 
 
.staff-only:after { 
 
    font-family: "FontAwesome"; 
 
    content: "\f13e"; /* open padlock */ 
 
    color: silver; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<span title="This text is only visible to admins" class="staff-only">Secret text</span>

Answer 2

在更新你的問題，你應該有一個<span>包裹元素：

.staff-only { 
 
    background-color: #c1ebf3; 
 
    border-radius: 3px; 
 
    color: #808080; 
 
    padding-left: -2px; 
 
    padding-right: 0.2em; 
 
} 
 
.staff-only:before { 
 
    font-family: "FontAwesome"; 
 
    content: "\f023"; /* padlock */ 
 
    color: silver; 
 
    padding: 0px 5px; 
 
} 
 
.tooltip:hover:after { 
 
    content: "Visible only to staff members!"; 
 
    color: silver; 
 
    font-size:0.9em; 
 
    padding:0 10px; 
 
    background:black; 
 
} 
 
.tooltip-data:hover:after { 
 
    content: attr(data-msg); 
 
    color: silver; 
 
    font-size:0.9em; 
 
    padding:0 10px; 
 
    background:black; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<p> 
 
    <span class="tooltip"> 
 
    <span class="staff-only">Secret text</span> 
 
    </span> 
 
</p> 
 
<p> 
 
    <span class="tooltip-data" data-msg="Visible only to staff members!"> 
 
    <span class="staff-only">Secret text</span> 
 
    </span> 
 
</p>

---

原來的答案：

您可以使用:after顯示一個小提示：

.staff-only { 
 
    background-color: #c1ebf3; 
 
    border-radius: 3px; 
 
    color: #808080; 
 
    padding-left: -2px; 
 
    padding-right: 0.2em; 
 
} 
 
.staff-only:before { 
 
    font-family: "FontAwesome"; 
 
    content: "\f023"; /* padlock */ 
 
    color: silver; 
 
    padding: 0px 5px; 
 
} 
 
.staff-only:hover:after { 
 
    content: "Visible only to staff members!"; 
 
    color: silver; 
 
    font-size:0.9em; 
 
    padding-left:10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<p> 
 
    <span class="staff-only">Secret text</span> 
 
</p>

Answer 3

你可以看一下W3Schools的如何處理提示：

https://www.w3schools.com/css/css_tooltip.asp

/* Tooltip container */ 
 
.tooltip { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ 
 
} 
 

 
/* Tooltip text */ 
 
.tooltip .tooltiptext { 
 
    visibility: hidden; 
 
    width: 120px; 
 
    top: 100%; 
 
    left: 50%; 
 
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */ 
 
    background-color: black; 
 
    color: #fff; 
 
    text-align: center; 
 
    padding: 5px 0; 
 
    border-radius: 6px; 
 
    
 
    /* Position the tooltip text - see examples below! */ 
 
    position: absolute; 
 
    z-index: 1; 
 
    
 
    /* Fade in */ 
 
    opacity: 0; 
 
    transition: opacity 1s; 
 
} 
 

 
.tooltip .tooltiptext::after { 
 
    content: " "; 
 
    position: absolute; 
 
    bottom: 100%; /* At the top of the tooltip */ 
 
    left: 50%; 
 
    margin-left: -5px; 
 
    border-width: 5px; 
 
    border-style: solid; 
 
    border-color: transparent transparent black transparent; 
 
} 
 

 
/* Show the tooltip text when you mouse over the tooltip container */ 
 
.tooltip:hover .tooltiptext { 
 
    visibility: visible; 
 
    
 
    /* Fade in */ 
 
    opacity: 1; 
 
}

<div class="tooltip">Hover over me 
 
    <span class="tooltiptext">Tooltip text</span> 
 
</div>