将工具提示添加到字体真棒图标

Question

有没有人在这里添加工具提示字体真棒图标？

我有以下jsfiddle,但似乎无法找到向图标添加工具提示的指南.

`

<header>
  <!-- icons for settings, change pwd and list of active sessions -->
  <div id="menuIcons">
    <i class="fa fa-cog"></i>
    <i class="fa fa-user"></i>
    <i class="fa fa-lock"></i>
  </div>

  <!-- display welcome text -->
  <div id="welcomeText">
    <p>Welcome Harriet</p>
  </div>

</header>

Answer 1

向任何HTML输出(不仅仅是FontAwesome)添加工具提示的问题本身就是一本完整的书.;-)

默认方式是使用title-attribute:

  <div id="welcomeText" title="So nice to see you!">
    <p>Welcome Harriet</p>
  </div>

要么

<i class="fa fa-cog" title="Do you like my fa-coq icon?"></i>

但由于大多数人(包括我)不喜欢标准工具提示,因此有许多工具可以"美化"它们并提供各种增强功能.我个人最喜欢的是jBox和qtip2.

Answer 2

您应该将“title”属性与“data-toogle”（引导程序）一起使用。

例如

<i class="fa fa-info" data-toggle="tooltip" title="Hooray!"></i>Hover over me

并且不要忘记添加 javascript 来显示工具提示

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();   
    });
</script>

Answer 3

只需在标签中使用title

<i class="fa fa-edit" title="Edit Mode"></i>

将鼠标悬停在该图标上时将显示“编辑模式”。

Answer 4

对于这个问题，使用几行SASS就可以轻松实现；

HTML：

<a href="https://www.urbandictionary.com/define.php?term=techninja" data-tool-tip="What's a tech ninja?" target="_blank"><i class="fas fa-2x fa-user-ninja" id="tech--ninja"></i></a>

CSS 输出将是：

a[data-tool-tip]{
    position: relative;
    text-decoration: none;
    color: rgba(255,255,255,0.75);
}

a[data-tool-tip]::after{
    content: attr(data-tool-tip);
    display: block;
    position: absolute;
    background-color: dimgrey;
    padding: 1em 3em;
    color: white;
    border-radius: 5px;
    font-size: .5em;
    bottom: 0;
    left: -180%;
    white-space: nowrap;
    transform: scale(0);
    transition: 
    transform ease-out 150ms,
    bottom ease-out 150ms;
}

a[data-tool-tip]:hover::after{
    transform: scale(1);
    bottom: 200%;
}

基本上，属性选择器 [data-tool-tip] 选择其中的内容，并允许您根据需要对其进行动画处理。