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

本文介绍了将工具提示添加到字体真棒图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Has anyone here added tooltips to font-awesome icons?

我有跟随jsfiddle ，但是似乎找不到指南来向其添加工具提示图标.

I have the following jsfiddle, but cannot seem to find a guide to add tooltips to the icons.

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

推荐答案

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

The issue of adding tooltips to any HTML-Output (not only FontAwesome) is an entire book on its own. ;-)

默认方法是使用title-attribute:

The default way would be to use the 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 .

But since most people (including me) do not like the standard-tooltips, there are MANY tools out there which will "beautify" them and offer all sort of enhancements. My personal favourites are jBox and qtip2.

这篇关于将工具提示添加到字体真棒图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！