Bootstrap 4 Tooltip does not work properly at Angular 6

Asked

Viewed 1,067 times

1

Below is the implementation of bootstrap 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"
            ]

In Component.html it 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 coming up on the screen.

inserir a descrição da imagem aqui

How do I fix it?

angular bootstrap-4 template tooltip

  • A quick and easy way to solve any problem with bootstrap is to install ng-bootstrap. Rode: npm install --save @ng-bootstrap/ng-bootstrap and pronto Documentation: https://ng-bootstrap.github.io/#/Getting-Started

2 answers

1

Dude got some details there.

First you have to start the script Tooltipe, I don’t know if you’re doing this. Here’s the official documentation: https://getbootstrap.com/docs/4.0/components/tooltips/

Second. These asterisks are being included in the type string ***data-toggle="tooltip" that *** cannot be placed in data, because that way the browser understand as a single word!

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

$(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>
    <script src="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>
    <script src="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>

0

Tooltip in Angular

Add

placement="top" ngbTooltip="Text to be displayed"

instead of data-placement="top" title="Tooltip on top"

Browser other questions tagged angular bootstrap-4 template tooltip

You are not signed in. Login or sign up in order to post.