Bootstrap tooltip placement and trigger options applied to fort-awesome icon not working in Angular 7 template

Question

Here's my html template:

<div>
  <form>
    <div class='row'>
      <div class='form-group col-md-6'>
        <label for='idCellNumber'>Cell number <fa-icon icon='info-circle' data-toggle='tooltip' title='10 digits, no spaces, hyphens or parenthesis'></fa-icon><span class='asterisk'>*</span>
        <span *ngIf='submitted && cellNumber.errors?.required' class='text-danger'>Required</span>
        <span *ngIf='submitted && cellNumber.errors?.pattern' class='text-danger'>Cell number should be 10 digits</span>
        </label>
        <input type='text' placeholder='1234567890' class='form-control' formControlName='cellNumber' id='idCellNumber' name='cellNumber' required>
      </div>
    </div>
  </form>
</div>

<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip('toggleEnabled', { boundary: 'window', placement: 'top', trigger: 'hover click' })
})
</script>

I'm trying to place the tooltip on top of the FontAwesome icon and cause it to appear when I click the icon or hover over it. However, the tooltip always appears on the bottom right hand corner of the icon and only appears when I hover over the icon.

This is what my index.html looks like:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=yes">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="https://cdn.jsdelivr.net/gh/coliff/bootstrap-rfs/bootstrap-rfs.css" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
  <script src="https://kit.fontawesome.com/9b2a0e20f4.js" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCJLtNXz3CS8TWeIML51m-AwdeVn0gtRCw"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous" defer></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" defer></script>
</body>
</html>

Is there some JavaScript or jQuery file that I'm missing in index.html? Any help in getting this to work would be appreciated.

can you provide a snippet of it and why you are using `jQuery` on `angular` — Nisharg Shah, Apr 12 '20 at 23:57
@Nisharg, using jquery because all the docs I've read mention that you need to include jquery to initialize the tooltip, unless I misunderstood that. But I suppose I could eliminate the jquery code in the html script tag. Even then, the tooltip behaves as described above. — coder101, Apr 13 '20 at 00:38
Bootstrap's native JS is known to cause [issues](https://github.com/FortAwesome/angular-fontawesome/issues/200#issuecomment-552221660) with `angular-fontawesome`. Your issue may be related to this behaviour. Also https://kit.fontawesome.com/9b2a0e20f4.js and `angular-fontawesome` library are alternative ways to consume FontAwesome 5. So you would normally use only one of them. — Yaroslav Admin, Apr 13 '20 at 10:41
@YaroslavAdmin - issue persists even after moving to dropping angular-fontawesome and using regular fontawesome instead (with the kit.fontawesome script you referred to). Also upgraded to Angular 9 and the issue still remains there. Ended up finally moving to ng-Bootstrap (albeit with its own set of issues), but at least I'm able to implement Tooltip with ng-Bootstrap. — coder101, Apr 16 '20 at 10:56
Both approaches replace a DOM element with the icon SVG, I would *speculate* that this is the reason of the issue. You can try to use an arbitrary element instead of an icon to confirm if this is the case. — Yaroslav Admin, Apr 16 '20 at 11:00
@YaroslavAdmin - tried exactly as you suggested. Used it on a button (copy and pasted code from Bootstrap's website, without any css modifications) - still an issue. — coder101, Apr 16 '20 at 11:02

score 0 · Answer 1 · answered Apr 13 '20 at 13:03

use this instead:

<i class="fas fa-info-circle text-primary " data-toggle='tooltip' title='10 digits, no 
spaces, hyphens or parenthesis'></i>

like:

   <div>
        <form>
            <div class='row'>
                <div class='form-group col-md-6'>
                    <label for='idCellNumber'>Cell number <i class="fas fa-info-circle text-primary" data-toggle='tooltip' title='10 digits, no spaces, hyphens or parenthesis'></i><span class='asterisk'>*</span>
              <span class='text-danger'>Required</span>
              <span class='text-danger'>Cell number should be 10 digits</span>
              </label>
                    <input type='text' placeholder='1234567890' class='form-control' formControlName='cellNumber' id='idCellNumber' name='cellNumber' required>
                </div>
            </div>
        </form>
    </div>

    <script>
        $(function() {
            $('[data-toggle="tooltip"]').tooltip('toggleEnabled', {
                boundary: 'window',
                placement: 'top',
                trigger: 'hover click'
            })
        })
    </script>

score 0 · Answer 2 · answered Apr 16 '20 at 11:00

Stopped using angular-fontawesome and used regular fontawesome instead, as suggested by @YarsolavAdmin but issue persisted. Upgraded project from Angular 7 to Angular 9, but issue persisted. Finally decided to implement ngBootstrap 6, which resolved the issue.

Bootstrap tooltip placement and trigger options applied to fort-awesome icon not working in Angular 7 template

2 Answers2