0

No se muestra el mensaje del tooltip del segundo combobox al cambiar la opción del primer combobox. Estos combobox son dato de prueba, pero la forma de cómo se utiliza en los reales combobox es igual. Necesito dejar Cargar_Select2(); en las funciones loadCiudades y loadPaises() y ver como utilizar el tooltip con esa funcion dentro de las otras

$(document).ready(function() {
 setTimeout(function() {
    InitializeTooltip();
  }, 500);
 
  // Cargar los países al cargar la página
  loadPaises();

  // Cargar las ciudades cuando se selecciona un país
  $('#cbxPokemon').change(function() {
    var paisId = $(this).val();
    if (paisId) {
      loadCiudades(paisId);
    } else {
      $('#cbxDatoPokemon').empty();
    }
  });

});

function InitializeTooltip() {
 $('[data-toggle="tooltip-primary-gris"]').tooltip("dispose");
 $('.select2-selection.select2-selection--multiple').tooltip("dispose");
 $('.select2-selection.select2-selection--single').tooltip("dispose");
 
        $('.select2-selection.select2-selection--single').tooltip({
            template: '<div class="tooltip tooltip-primary-gris" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
        });
        
        $('.select2-selection.select2-selection--multiple').tooltip({
    template: '<div class="tooltip tooltip-primary-gris" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
  });
    
  $('[data-toggle="tooltip-primary-gris"]').tooltip({
    template: '<div class="tooltip tooltip-primary-gris" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
  });
  
  
    $('[data-toggle="tooltip-primary-gris"]').tooltip("enable");
    $('.select2-selection.select2-selection--multiple').tooltip("enable");
    $('.select2-selection.select2-selection--single').tooltip("enable");
  
}
    

// Función para cargar las ciudades en función del país seleccionado
// Aquí se deja vacía ya que no hay una segunda API relacionada para este ejemplo.
function loadCiudades(paisId) {
  $.ajax({
    url: 'https://pokeapi.co/api/v2/pokemon/' + paisId, // URL del endpoint para obtener los Pokémon
    method: 'GET',
    success: function(data) {
      $('#cbxDatoPokemon').empty();
      $('#cbxDatoPokemon').append('<option></option>'); // Opción vacía para permitir clear
      data.abilities.forEach(function(pokemon) {
        $('#cbxDatoPokemon').append('<option value="' + pokemon.ability.name + '">' + pokemon.ability.name + '</option>');
      });
      Cargar_Select2('#cbxDatoPokemon');
        // Inicializar tooltips al cargar el documento
  setTimeout(function() {
    InitializeTooltip();
  }, 500);
    }
  });
}

// Función para cargar los países (combobox principal)
function loadPaises() {
  $.ajax({
    url: 'https://pokeapi.co/api/v2/pokemon/?limit=100', // URL del endpoint para obtener los Pokémon
    method: 'GET',
    success: function(data) {
      $('#cbxPokemon').empty();
      $('#cbxPokemon').append('<option></option>'); // Opción vacía para permitir clear
      data.results.forEach(function(pokemon) {
        $('#cbxPokemon').append('<option value="' + pokemon.name + '">' + pokemon.name + '</option>');
      });
      Cargar_Select2('#cbxPokemon');
        // Inicializar tooltips al cargar el documento
  setTimeout(function() {
   InitializeTooltip();
   
  }, 500);
    }
  });
}

function Cargar_Select2(id) {
  $(id).select2({

    placeholder: "Seleccione",
    minimumResultsForSearch: 1,
    dropdownAutoWidth: true,
    multiple: false,
    width: '100%',
    language: {
      noResults: function(term) {

        return '<b>Sin coincidencias !!!</b>';
      }
    },
    escapeMarkup: function(markup) {

      if (markup === "Searching…") {
        markup = "<b>Cargando datos... por favor espere !</b>";
      }

      return markup;
    },

    allowClear: true
  });
  $('.class_active_search_select').css('width', '100%');
  var data =  $(id).attr('aria-label');
  $("select"+id+" + span.select2.select2-container.select2-container--default span.selection span.select2-selection.select2-selection--single").attr("data-bs-original-title", data);
}
.tooltip {
  position: absolute;
  z-index: 100000000;
  display: block;
  margin: 0;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  opacity: 0;
}

.tooltip.show {
  opacity: 0.9;
}

.tooltip .tooltip-arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}

.tooltip .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.tooltip-inner::before {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.tooltip-inner {
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 3px;
}

.tooltip-primary-gris .tooltip-inner {
  background-color: var(--gris-claro-bac-credomatic) !important;
  color: black;
}

.tooltip-primary-gris.bs-tooltip-top .tooltip-arrow::before,
.tooltip-primary-gris.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  border-top-color: var(--gris-claro-bac-credomatic);
}

.tooltip-primary-gris.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip-primary-gris.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  border-bottom-color: var(--gris-claro-bac-credomatic);
}

.tooltip-primary-gris.bs-tooltip-start .tooltip-arrow::before,
.tooltip-primary-gris.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  border-left-color: var(--gris-claro-bac-credomatic);
}

.tooltip-primary-gris.bs-tooltip-end .tooltip-arrow::before,
.tooltip-primary-gris.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  border-right-color: var(--gris-claro-bac-credomatic);
}

:root {
  --gris-claro-bac-credomatic: #E6E6E6;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

</br>
<div class="row">
  <div class="col-sm-12 form-group">
    <select data-placeholder="Seleccione el pokemon" name="cbxPokemon" id="cbxPokemon" data-toggle="tooltip-primary-gris" data-placement="top" title="Seleccione el pokemon que deseas" class="form-control select2-show-search form-select" required></select>
    <div class="invalid-feedback">Campo obligatorio.</div>
  </div>
</div>
</br>
<div class="row">
  <div class="col-sm-12 form-group">
    <select data-placeholder="Seleccione la informacion" name="cbxDatoPokemon" id="cbxDatoPokemon" data-toggle="tooltip-primary-gris" data-placement="top" title="Seleccione la informacion del pokemon" class="form-control select2-show-search form-select" required></select>
    <div class="invalid-feedback">Campo obligatorio.</div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

https://jsfiddle.net/xyf8h39w/1/

Cuando no selecciono un dato del departamento se ve el tooltip bien del segundo combobox. introducir la descripción de la imagen aquí

Pero cuando selecciono un dato del primer combobox, el segundo combobox se le desaparece el tooltip. Nose si es porque se recrea nuevamente el select2. introducir la descripción de la imagen aquí

1 respuesta 1

0

Efectivamente, el problema se debe a que estas re-creando el segundo select2.

La solución es más simple de lo que te imaginas. Después de agregar los <option> al <select> tenes que disparar el evento change sobre el <select>

Ejemplo:

function loadCiudades(paisId) {
  $.ajax({
    url: 'https://pokeapi.co/api/v2/pokemon/' + paisId, // URL del endpoint para obtener los Pokémon
    method: 'GET',
    success: function (data) {
      let $select = $('#cbxDatoPokemon');
      $select.empty();
      $select.append('<option></option>'); // Opción vacía para permitir clear
      data.abilities.forEach(function (pokemon) {
        $select.append('<option value="' + pokemon.ability.name + '">' + pokemon.ability.name + '</option>');
      });
      $select.trigger('change'); // <- ACA
    }
  });
}

Más info:

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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