Bootstrap параметры размещения всплывающей подсказки и триггера, применяемые к значку fort-awesome, не работающему в шаблоне Angular 7 - PullRequest
Новая
       27

Bootstrap параметры размещения всплывающей подсказки и триггера, применяемые к значку fort-awesome, не работающему в шаблоне Angular 7

1 голос
/ 13 апреля 2020

Вот мой шаблон 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 и заставить его появляться, когда я нажимаю на значок или наводим курсор на него. Тем не менее, всплывающая подсказка всегда отображается в правом нижнем углу значка и отображается только при наведении курсора на значок.

Это мой индекс. 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>

Есть ли какой-нибудь файл JavaScript или jQuery, который мне не хватает в индексе. html? Буду признателен за любую помощь в получении этого на работу.

Ответы [ 2 ]

0 голосов
/ 16 апреля 2020

Прекращено использование angular -fontawesome и вместо него использовалось обычное fontawesome, как предложено @YarsolavAdmin, но проблема не устранена. Обновлен проект с Angular 7 до Angular 9, но проблема не устранена. Наконец решил реализовать ng Bootstrap 6, что решило проблему.

0 голосов
/ 13 апреля 2020

используйте это вместо: 

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

как: 

   <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>
...