如何在 flexdashboard 导航栏图标中添加工具提示？

Question

我在R有这个应用程序。

当我将鼠标悬停在图标上时如何添加工具提示？ 像这样：

图标类是.fa-question-circle 。 我试过：

HTML：

<a href="#" class=".fa-question-circle" data-tooltip="My text is a text">Text</a>

CSS：

.fa-question-circle 
{
    position:relative;
}

.fa-question-circle:after
{
    background-color:rgba(0, 0, 0, .6);
    color: white;
    box-sizing:border-box;
    content: attr(data-tooltip);
    display:none;
    padding:5px;
    position:absolute;
    right: -105px;
    bottom: -55px;
    z-index:3;
    box-shadow: 0 0 3px #000;
    border-radius: 0px 10px 10px 10px;
}

.fa-question-circle:hover:after {
    display:block;
}

但不起作用。 谢谢。

Answer 1

我找到了错误的部分。 你需要使用class="fa-question-circle"而不是class=".fa-question-circle"

 .fa-question-circle { position:relative; } .fa-question-circle:after { background-color:rgba(0, 0, 0, .6); color: white; box-sizing:border-box; content: attr(data-tooltip); display:none; padding:5px; position:absolute; right: -105px; bottom: -55px; z-index:3; box-shadow: 0 0 3px #000; border-radius: 0px 10px 10px 10px; } .fa-question-circle:hover:after { display:block; }

 <a href="#" class="fa-question-circle" data-tooltip="My text is a text">Text</a>

Answer 2

您可以尝试这样的操作并删除. 来自anchor标记中的类名。

 .fa-question-circle { position: relative; display: inline-block; border-bottom: 1px dotted black; } .fa-question-circle .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; } .fa-question-circle:hover .tooltiptext { visibility: visible; }

 <a href="#" class="fa-question-circle">Text <span class="tooltiptext">My text is a text</span> </a>