Question

我已经创建了一个基于CSS的文本前缀，如下所示：

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

它在文本前面显示一个挂锁，表示此文本是秘密的。我想显示一个提示（也就是工具提示，或HTML5标题），阅读＆＃34;只有工作人员可以看到＆＃34;，当用户将鼠标悬停在挂锁上时会显示。我怎么能实现它？

完整示例 到目前为止，在评论的帮助下，我已经（卡住）在这里：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

这就是我得到的。屏幕截图显示了两条评论，一条公开，一条仅限员工。问题是来自员工评论的右侧空白区域，这似乎适合工具提示文本。无法应付它:(

Answer 1

更新问题后，您应该使用<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 2

您可以查看W3Schools如何处理工具提示：

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

<?xml version="1.0" encoding="UTF-8"?>

/* 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;
}

Answer 3

谢谢大家的帮助。最终我发现了一个非常优雅的解决方案：使用title属性：

来自HTML 5.1标准：

title属性表示元素的建议信息，例如适用于工具提示的信息。 ...... [在]一个段落，它可以是文本的脚注或评论;

.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>

CSS工具提示：

3 个答案: