Add tooltip to font awesome icon

Question

Has anyone here added tooltips to font-awesome icons   I have the following jsfiddle  but cannot seem to find a guide to add tooltips to the icons    lt header gt     lt  -- icons for settings  change pwd and list of active sessions -- gt     lt div id  menuIcons  gt       lt i class  fa fa-cog  gt  lt  i gt       lt i class  fa fa-user  gt  lt  i gt       lt i class  fa fa-lock  gt  lt  i gt     lt  div gt      lt  -- display welcome text -- gt     lt div id  welcomeText  gt       lt p gt Welcome Harriet lt  p gt     lt  div gt    lt  header gt

User · Accepted Answer

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

The default way would be to use the title-attribute:

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

or

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

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.

User · Answer

You should use  title  attribute along with  data-toogle   bootstrap    For example   lt i class  fa fa-info  data-toggle  tooltip  title  Hooray   gt  lt  i gt Hover over me   and do not forget to add the javascript to display the tooltip   lt script gt        document  ready function                data-toggle  tooltip     tooltip                lt  script gt

User · Answer

Simply use title in tag like   lt i class  fa fa-edit  title  Edit Mode  gt  lt  i gt    This will show  Edit Mode  when hover that icon

User · Answer

Simply with native html  amp  css    lt div class  quot tooltip quot  gt Hover over me    lt span class  quot tooltiptext quot  gt Tooltip text lt  span gt   lt  div gt      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    background-color   555    color   fff    text-align  center    padding  5px 0    border-radius  6px        Position the tooltip text      position  absolute    z-index  1    bottom  125     left  50     margin-left  -60px        Fade in tooltip      opacity  0    transition  opacity 0 3s        Tooltip arrow     tooltip  tooltiptext  after     content   quot  quot     position  absolute    top  100     left  50     margin-left  -5px    border-width  5px    border-style  solid    border-color   555 transparent transparent transparent        Show the tooltip text when you mouse over the tooltip container     tooltip hover  tooltiptext     visibility  visible    opacity  1     Here is the source of the example from w3schools

User · Answer

codepen Is perhaps a helpful example     lt div class  social-icons  gt     lt a class  social-icon social-icon--codepen  gt       lt i class  fa fa-codepen  gt  lt  i gt       lt div class  tooltip  gt Codepen lt  div gt   lt  div gt   body       display  flex    align-items  center    justify-content  center    min-height  100vh        Color Variables     color-codepen   000      Social Icon Mixin     mixin social-icon  color      background   color    background  linear-gradient tint  color  5    shade  color  5       border-bottom  1px solid shade  color  20      color  tint  color  50        amp  hover       color  tint  color  80        text-shadow  0px 1px 0px shade  color  20            tooltip       background   color      background  linear-gradient tint  color  15     color       color  tint  color  80          amp  after         border-top-color   color                  Social Icons     social-icons     display  flex      social-icon     display  flex    align-items  center    justify-content  center    position  relative    width  80px    height  80px    margin  0 0 5rem    border-radius  50     cursor  pointer    font-family   Helvetica Neue    Helvetica    Arial   sans-serif    font-size  2 5rem    text-decoration  none    text-shadow  0 1px 0 rgba 0 0 0 0 2     transition  all 0 15s ease      amp  hover       color   fff        tooltip         visibility  visible        opacity  1        transform  translate -50   -150                  amp  active       box-shadow  0px 1px 3px rgba 0  0  0  0 5  inset          amp --codepen    include social-icon  color-codepen        i       position  relative      top  1px            Tooltips     tooltip     display  block    position  absolute    top  0    left  50     padding  0 8rem 1rem    border-radius  3px    font-size  0 8rem    font-weight  bold    opacity  0    pointer-events  none    text-transform  uppercase    transform  translate -50   -100      transition  all 0 3s ease    z-index  1      amp  after       display  block      position  absolute      bottom  0      left  50       width  0      height  0      content          border  solid      border-width  10px 10px 0 10px      border-color  transparent      transform  translate -50   100

User · Answer

In regards to this question  this can be easily achieved using a few lines of SASS   HTML    lt a href  https   www urbandictionary com define php term techninja  data-tool-tip  What s a tech ninja   target   blank  gt  lt i class  fas fa-2x fa-user-ninja  id  tech--ninja  gt  lt  i gt  lt  a gt    CSS output would be   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       Basically the attribute selector  data-tool-tip  selects the content of whatever s inside and allows you to animate it however you want

User · Answer

The simplest solution I have found is to wrap your Font Awesome Icon in an  lt a gt  lt  a gt  tag      lt Tooltip title  quot Node js quot   gt        lt a gt           lt FontAwesomeIcon icon  faNode  size  quot 2x quot    gt        lt  a gt      lt  Tooltip gt

[icons] Add tooltip to font awesome icon

Examples related to icons

Examples related to tooltip

Examples related to font-awesome