1

ここに私の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 ファイルはありますか? これを機能させるための助けをいただければ幸いです。

4

2 に答える 2