tooltips.html

<style>
    /* Añade estos estilos al bloque <style> existente */
    .tooltip {
        position: relative;
        display: inline-block;
        margin-left: 5px;
        width: 16px;
        height: 16px;
        background-color: #f0f0f0;
        color: #333;
        border-radius: 50%;
        text-align: center;
        line-height: 16px;
        font-size: 12px;
        cursor: help;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 200px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -100px;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }
</style>

<!-- Modifica estas secciones en el cuerpo del HTML -->
<div class="input-group">
    <label for="negative-prompt">Prompt negativo:
        <span class="tooltip">?
            <span class="tooltiptext">Especifica elementos que no deseas que aparezcan en la imagen. Ayuda a evitar características no deseadas.</span>
        </span>
    </label>
    <input type="text" id="negative-prompt" placeholder="Elementos a evitar en la imagen" value="blurry, bad, low quality, distorted">
</div>
<div class="input-group">
    <label for="steps">Pasos de inferencia:
        <span class="tooltip">?
            <span class="tooltiptext">Controla cuántas veces se refina la imagen. Más pasos pueden resultar en más detalles, pero también aumentan el tiempo de generación.</span>
        </span>
    </label>
    <input type="number" id="steps" min="20" max="50" value="30">
</div>
<div class="input-group">
    <label for="guidance">Escala de guía:
        <span class="tooltip">?
            <span class="tooltiptext">Determina cuánto se adhiere la imagen al prompt. Valores más altos producen imágenes más fieles al prompt, pero pueden ser menos creativas.</span>
        </span>
    </label>
    <input type="number" id="guidance" min="1" max="20" step="0.1" value="7.5">
</div>
<div class="input-group">
    <label for="width">Ancho de la imagen:
        <span class="tooltip">?
            <span class="tooltiptext">Define el ancho de la imagen generada en píxeles. Resoluciones más altas pueden producir más detalles pero tardan más en generarse.</span>
        </span>
    </label>
    <select id="width">
        <option value="512">512px</option>
        <option value="768">768px</option>
        <option value="1024">1024px</option>
    </select>
</div>
<div class="input-group">
    <label for="height">Alto de la imagen:
        <span class="tooltip">?
            <span class="tooltiptext">Define el alto de la imagen generada en píxeles. Resoluciones más altas pueden producir más detalles pero tardan más en generarse.</span>
        </span>
    </label>
    <select id="height">
        <option value="512">512px</option>
        <option value="768">768px</option>
        <option value="1024">1024px</option>
    </select>
</div>