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