1

Abaixo segue a implementação do bootstrap na minha aplicação (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 está assim:

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

E é assim que está aparecendo na tela.

inserir a descrição da imagem aqui

Como resolvo isso?

1
  • Uma forma rápida e fácil de resolver qualquer problema com o bootstrap é instalar o ng-bootstrap. Rode: npm install --save @ng-bootstrap/ng-bootstrap e pronto Documentação: ng-bootstrap.github.io/#/getting-started Commented 4/10/2018 às 20:31

2 Respostas 2

1

Cara tem uns detalhes ai.

Primeiro vc tem que iniciar o script Tooltipe, não sei se vc está fazendo isso. Aqui está a documentação oficial: https://getbootstrap.com/docs/4.0/components/tooltips/

Segundo. Esses asteriscos estão sendo incluído na string tipo ***data-toggle="tooltip" isso *** não pode ficar colocado em data, pois dessa forma o browser entendo como uma palava só!

Veja no exemplo abaixo funcionando no primeiro elemento e buggando no segundo por causa do *****

$(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 em Angular

Adicionar

placement="top" ngbTooltip="Texto a ser mostrar"

ao invés de data-placement="top" title="Tooltip on top"

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .