这是我的html模板：
<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>
我正在尝试将工具提示放在FontAwesome图标的顶部，并在我单击该图标或将其悬停在其上方时显示。但是，工具提示始终显示在图标的右下角，并且仅当我将鼠标悬停在图标上时才显示。
这是我的index.html的样子：
<!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>index.html中缺少一些JavaScript或jQuery文件吗？任何帮助使此功能正常工作的方法将不胜感激。
这是我的html模板：