I am using bootstrap tooltip but I cannot seem to get it to work with a font awesome icon.

I can get this to work:

 <a data-container="body" data-toggle="popover" data-placement="top" title="Other Prep" data-content="Indicates whether or not this product get other prep before shipment" data-original-title="">Info</a>

But this does not work:

 <a data-container="body" data-toggle="popover" data-placement="top" title="Other Prep" data-content="Indicates whether or not this product get other prep before shipment" data-original-title=""><i class="fa fa-info-circle"></i></a>

Here is my javascript:

$(function(){
    $('[data-toggle="popover"]').popover();
    $('body').on('click', function (e) {
        if ($(e.target).data('toggle') !== 'popover'
                && $(e.target).parents('.popover.in').length === 0) {
            $('[data-toggle="popover"]').popover('hide');
        }
    });
});

Does anyone have any help they can shoot me to help me understand why this doesn't work.

Thanks!

I am using bootstrap tooltip but I cannot seem to get it to work with a font awesome icon.

I can get this to work:

 <a data-container="body" data-toggle="popover" data-placement="top" title="Other Prep" data-content="Indicates whether or not this product get other prep before shipment" data-original-title="">Info</a>

But this does not work:

 <a data-container="body" data-toggle="popover" data-placement="top" title="Other Prep" data-content="Indicates whether or not this product get other prep before shipment" data-original-title=""><i class="fa fa-info-circle"></i></a>

Here is my javascript:

$(function(){
    $('[data-toggle="popover"]').popover();
    $('body').on('click', function (e) {
        if ($(e.target).data('toggle') !== 'popover'
                && $(e.target).parents('.popover.in').length === 0) {
            $('[data-toggle="popover"]').popover('hide');
        }
    });
});

Does anyone have any help they can shoot me to help me understand why this doesn't work.

Thanks!

• javascript
• jquery
• css
• twitter-bootstrap

4 Answers 4

According to Bootstrap's documentation. You have to initialize the tooltip & popover functionality.

$('[data-toggle="tooltip"]').tooltip();

By the way, you don't need the HTML elements AND the Javascript. Just one or the other. I think (not sure fully) your icon may not be working because it renders with nothing between your a tags. You could try putting a   in there.

I was able to get this to work:

<i class="fa fa-info-circle" data-toggle="tooltip" data-placement="left" title="Tooltip on left"></i>

You have to set the icon to an inline-block in css:

i.fa {
   display: inline-block;
}

Also you should set this option to the popover:

$(document).ready(function() {
    $("i.fa").popover({'trigger':'hover'});
});

Fiddle: http://jsfiddle.net/ndzqqhfz/2/

Looks like I just needed to remove the [a] tag surrounding the [i] tag like so:

 <i class="fa fa-info-circle" data-container="body" data-toggle="popover" data-placement="top" title="Other Prep" data-content="Indicates whether or not this product get other prep before shipment" data-original-title=""></i>

I realise this is an old question but a search brought me here, so I thought I'd post how I managed to do it with React and Font Awesome in 2021...

import React  from "react";
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Tooltip from 'react-bootstrap/Tooltip';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'

export const ToolTipOverlay = (props) => {

  const placement = 'right';

  return (
    <>
      {     
        <OverlayTrigger
          key={placement}
          placement={placement}
          overlay={
            <Tooltip id={`tooltip-{placement}`}>
              {props.text}
            </Tooltip>
      }>
        <FontAwesomeIcon icon={faInfoCircle} color="blue" />

      </OverlayTrigger>}
    </>
  );

}