Tooltip of Bootstrap 4 does not work correctly on Angular 6

Navigation
0

Below is the bootstrap implementation in my application (angular.json) 

            "styles": [
              "src/styles.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/popper.js/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

No component.html looks like this: 

  <div class="form-row">
    <div class="form-group col">
      <label for="AccountName" ***data-toggle="tooltip" data-placement="top" title="Tooltip on top"***>Account Name</label>
      <input class="form-control isRequired" formControlName="AccountName" type="text" id="AccountName">
      <small *ngIf="formAmendment.get('AccountName').errors?.required" class="text-danger d-block mt-2">Account Name is required!</small>
    </div>
  </div>

And that's how it's showing up on the screen.

How do I resolve this?

    
asked by anonymous 04.10.2018 / 21:47

1 answer

1

Man has some details there.

First you have to start the script Tooltipe , I do not know if you are doing this. Here's the official documentation: link

Second. These asterisks are being included in the string type ***data-toggle="tooltip" this *** can not be placed in data , therefore the browser understands as a single word!

See the example below working on the first element and buggando in the second because of the 

$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>

    
        <div class="form-row">
                <div class="form-group col">
                  <label for="AccountName" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Account Name</label>
                  <input class="form-control isRequired" formControlName="AccountName" type="text" id="AccountName">
                  <small *ngIf="formAmendment.get('AccountName').errors?.required" class="text-danger d-block mt-2"> * esse não funciona!</small>
                </div>
              </div>
              
                      <div class="form-row">
                <div class="form-group col">
                  <label for="AccountName" *data-toggle="tooltip" data-placement="top" title="Tooltip on top">Account Name</label>
                  <input class="form-control isRequired" formControlName="AccountName" type="text" id="AccountName">
                  <small *ngIf="formAmendment.get('AccountName').errors?.required" class="text-danger d-block mt-2">Account Name is required!</small>
                </div>
              </div>
    
04.10.2018 / 22:28
Disable weekend and enable days with Fullcalendar plugin Jquery Convert Json to a Csharp Object [closed]