0

Tengo problemas con tooltips en firefox. Cuando lo corro en chrome funciona sin problemas pero al correrlo en firefox no funciona a menos que lo saque del input Estiy trabajando en Laravel con boostrap

Asi se ve en Chrome

Vista en google chrome

Y asi en firefox

Vista en firefox En firefox funciona solo cuando lo saco de input introducir la descripción de la imagen aquí

Este en mi codigo del tooltip, funciona en ambos pero si el tooltip se encuentra dentro input no funciona en firefox como se ve en la imagen

<div class="form-floating mb-3">
    <input style="z-index:1;" name="abreviatura" type="text" class="form-control @error('abreviatura') is-invalid @enderror" id="abreviatura" value="{{ old('abreviatura') }}" placeholder="Abreviatura del pais" tabindex="0" required>
        <a target="_blank"href="https://www.inm.gob.mx/gobmx/word/index.php/listado-de-paises-con-abreviaturas/" style="float: right; margin-top:-35px; margin-right:10px; z-index:2;" data-toggle="tooltip" data-bs-placement="bottom" title="Para más referencia da click">
        <i class="fa-solid fa-circle-info"></i></a>
            @error('abreviatura')
                <span class="invalid-feedback">
                 <strong>{{ $message }}</strong>
                  </span>
              @enderror
               <label for="abreviatura">Abreviatura del pais</label>
 </div>

5
  • 1
    ¿porque tienes dos href en el <a>? ¿Y ese código que has pegado en la pregunta es el que funciona o el que no funciona? ¿Y eso lo estas haciendo en que? ¿laravel? ¿codeigniter? ¿asp? ¿php? Procura concretar mejor la pregunta y pon correctamente sus etiquetas para obtener mejores ayudas, gracias.
    – masterguru
    el 20 abr. 2022 a las 17:24
  • @masterguru Ya le borre eso pero aun asi no funciona, estoy trabajando con laravel y cuando visualizo en chrome si funciona pero para firefox funciona solo cuando el tooltip esta fuera del input el 20 abr. 2022 a las 17:57
  • Sigo preguntándome como pones eso dentro del input, pues el código que has puesto lo muestra fuera: jsfiddle.net/fmtu7xhw
    – masterguru
    el 20 abr. 2022 a las 18:04
  • @masterguru es verdad, es que pegue lo del codigo del que se ve fuera. ya lo corregi el 20 abr. 2022 a las 18:11
  • Acabo de agregar una respuesta, míratela, adáptala a tu código y si te funciona acepta mi respuesta para que la comunidad lo sepa. En caso contrario dime que problema te surge.
    – masterguru
    el 20 abr. 2022 a las 18:28

1 respuesta 1

1

Mi propuesta pasa por no usar z-index ni estilos personalizados sino elementos y clases de bootstrap que nos facilitarán arreglar este comportamiento anómalo.

Propongo usar input-group combinado con las clases input-group-append, bg-white y border-right-0, de este modo para que se parezca lo mejor posible a lo que el OP pretende:

    <div class="input-group mb-2">
      <input name="abreviatura" type="text" class="form-control border-right-0" id="abreviatura" value="abreviatura" placeholder="Abreviatura del pais" tabindex="0" required>
      <div class="input-group-append">
        <div class="input-group-text bg-white">
          <a target="_blank" href="https://www.inm.gob.mx/gobmx/word/index.php/listado-de-paises-con-abreviaturas/" data-toggle="tooltip" data-bs-placement="bottom" title="Para más referencia da click">
            <i class="fa-solid fa-circle-info"></i></a>
        </div>
      </div>
    </div>

Aquí dejo un snippet funcional de ejemplo:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<script>
  $(function() {
    $('[data-toggle="tooltip"]').tooltip()
  })

</script>
<div class="container">
  <div class="form-floating mb-3">
    <div class="input-group mb-2">
      <input name="abreviatura" type="text" class="form-control border-right-0" id="abreviatura" value="abreviatura" placeholder="Abreviatura del pais" tabindex="0" required>
      <div class="input-group-append">
        <div class="input-group-text bg-white">
          <a target="_blank" href="https://www.inm.gob.mx/gobmx/word/index.php/listado-de-paises-con-abreviaturas/" data-toggle="tooltip" data-bs-placement="bottom" title="Para más referencia da click">
            <i class="fa-solid fa-circle-info"></i></a>
        </div>
      </div>
    </div>
    <label for="abreviatura">Abreviatura del pais</label>
  </div>
</div>

Ya nos comentas si te ha funcionado.

2
  • Si esta funcionando, ahora solo falta ver como hacer que funcione la etiqueta flotante que tenia, se ve como doble etiqueta y no se minimiza el 22 abr. 2022 a las 15:53
  • No se a que te refieres... en mi respuesta no se ve ninguna doble etiqueta creo... ¿o tu código no era el de la pregunta y habia alguna cosa más que desconozco?
    – masterguru
    el 22 abr. 2022 a las 17:02

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.