Skip to main content
cuerpo editado
Origen Enlace
$(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();
  }, 100500);
    }
  });
}

// 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();
   
  }, 100500);
    }
  });
}

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>
$(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();
  }, 100);
    }
  });
}

// 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();
   
  }, 100);
    }
  });
}

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%');

}
.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>
$(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>
cuerpo editado
Origen Enlace
$(document).ready(function() {

 setTimeout(function() {
    InitializeTooltip();
  }, 100500);
  // 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();
  }, 100);
    }
  });
}

// 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();
   
  }, 100);
    }
  });
}

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%');

}
.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>
$(document).ready(function() {

 setTimeout(function() {
    InitializeTooltip();
  }, 100);
  // 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();
  }, 100);
    }
  });
}

// 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();
   
  }, 100);
    }
  });
}

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%');

}
.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>
$(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();
  }, 100);
    }
  });
}

// 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();
   
  }, 100);
    }
  });
}

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%');

}
.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>
se eliminaron 479 caracteres en el cuerpo
Origen Enlace
$(document).ready(function() {

  // Inicializar tooltips al cargar el documento
  setTimeout(function() {
    initializeTooltipsInitializeTooltip();
  }, 100);
 
  // 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();
    }
  });

  // Escuchar eventos específicos de select2 y reinicializar tooltips
  $(document).on('select2:select select2:unselect', '.select2', function() {
    setTimeout(function() {
      initializeTooltips();
    }, 100);
  });

});
 

function initializeTooltipsInitializeTooltip() {
  $('[data-toggle="tooltip-primary-gris"]').tooltip({"dispose");
    template: '<div class="tooltip tooltip$('.select2-primaryselection.select2-gris" role="tooltip"><div class="tooltipselection-arrow"></div><div class="tooltip-inner"></div></div>'
  }multiple').tooltip("dispose");
  $('.select2-selection.select2-selection--multiple'single').tooltip({"dispose");
    template: '<div class="tooltip 
 tooltip-primary-gris" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
  });
  $('.select2.select2-containerselection.select2-containerselection--default'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--single'multiple').tooltip({
    template: '<div class="tooltip tooltip-primary-gris" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
  });
    
  $('.alert.alert'[data-success'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>'
  });
  $('.fa.fa-exclamation-triangle.iconError.animate__animated.animate__infinite.animate__rubberBand').tooltip({
    
 template: '<div class="tooltip tooltip-primary$('[data-gris" role="tooltip"><div class="tooltiptoggle="tooltip-arrow"></div><div class="tooltipprimary-inner"></div></div>'
  }gris"]').tooltip("enable");
    $('.form-control.select2-show-search.form-selectselection.select2-hiddenselection-accessible'-multiple').tooltip({"enable");
    template: '<div class="tooltip tooltip$('.select2-primaryselection.select2-gris" role="tooltip"><div class="tooltipselection-arrow"></div><div class="tooltip-inner"></div></div>'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();
  }, 100);
    }
  });
}

// 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();
    
  }, 100);
    }
  });
}

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%'); 

}
.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>
$(document).ready(function() {

  // Inicializar tooltips al cargar el documento
  setTimeout(function() {
    initializeTooltips();
  }, 100);
 
  // 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();
    }
  });

  // Escuchar eventos específicos de select2 y reinicializar tooltips
  $(document).on('select2:select select2:unselect', '.select2', function() {
    setTimeout(function() {
      initializeTooltips();
    }, 100);
  });

});
 

function initializeTooltips() {
  $('[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>'
  });
  $('.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>'
  });
  $('.select2.select2-container.select2-container--default').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--single').tooltip({
    template: '<div class="tooltip tooltip-primary-gris" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
  });
  $('.alert.alert-success').tooltip({
    template: '<div class="tooltip tooltip-primary-gris" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
  });
  $('.fa.fa-exclamation-triangle.iconError.animate__animated.animate__infinite.animate__rubberBand').tooltip({
    template: '<div class="tooltip tooltip-primary-gris" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
  });
  $('.form-control.select2-show-search.form-select.select2-hidden-accessible').tooltip({
    template: '<div class="tooltip tooltip-primary-gris" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
  });
}

// 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');
      
    }
  });
}

// 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');
    }
  });
}

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%');
}
.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>
$(document).ready(function() {

 setTimeout(function() {
    InitializeTooltip();
  }, 100);
  // 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();
  }, 100);
    }
  });
}

// 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();
    
  }, 100);
    }
  });
}

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%'); 

}
.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>
se añadieron 16 caracteres en el cuerpo
Origen Enlace
Loading
se añadieron 145 caracteres en el cuerpo
Origen Enlace
Loading
Agrego snippet
Origen Enlace
Marcos
  • 35.7k
  • 7
  • 36
  • 70
Loading
Origen Enlace
Loading