Tooltips

Inicio › Forums › Discusión / Discussió / Eztabaida / Discussion › Tooltips

This topic contains 3 respuestas, has 2 voices, and was last updated by  Jennifer Hace 8 años, 11 meses.

  • Author
    Entradas
  • 26 noviembre, 2015 at 8:30 #21497

    Jennifer
    Member

    Buenos días a todos:

    Me gustaría agregar tooltips a un proyecto que estoy haciendo en exe-learning para que salgan los significados de algunas palabras del texto. Estoy siguiendo estas explicaciones: http://librosweb.es/libro/javascript/capitulo_8/tooltip.html

    Mi pregunta es, ¿cómo incluyo la libreria? He pensado hacerlo a posteriori, una vez que exporto en html y cambiar ahí cosas en el código, pero me gusatría saber si podría incluir la libreria antes, para así poder usar esta funcionalidad para todos mis proyectos, sin tener que hacerlo a mano.

    Muchas gracias y feliz jueves:

    Jennifer Galadí

  • 26 noviembre, 2015 at 11:07 #21498

    Ignacio Gros
    Keymaster

    En la próxima versión de eXe (2.1) podrás crearlas desde el propio editor.  Se usará qTip. De momento no queda otra que hacerlo a mano…

    Puedes incluir la librería en el Estilo que estés usando (usando la opciones “extra-head” o “extra-body” de su archivo config.xml). Tienes un ejemplo en los Estilos INTEF, EducaMadrid y MAX de eXeLearning 2.0. También puedes usar el pie de página (pestaña Propiedades). En ese caso, tendrás que usar el iDevice “Ficheros adjuntos” para asegurar que los archivos necesarios se incluyan en la exportación.

    Será mucho más fácil dentro de poco.

    Saludos.

  • 26 noviembre, 2015 at 11:40 #21499

    Jennifer
    Member

    Muchas gracias por la rápida respuesta.

    Voy a probar como me has dicho.

    Espero que tenga un buen día Ignacio

  • 26 noviembre, 2015 at 12:25 #21500

    Jennifer
    Member

    Para aquellos que tengan un problema similar, les pongo cual ha sido mi solución (aunque todavía tengo que ajustar el estilo y la localización en que sale):

    En el css del estilo he puesto el siguiente código:

    .tooltip { border: 0px none #000000;

    color: #000000; 

    outline: none;

    cursor: help; 

    text-decoration: none;

    position: relative;

    }

    .tooltip span { margin-left: -999em;

    position: absolute;

    border-radius: 5px;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    box-shadow: 2px 2px 10px rgba(0,0,0,0.4);

    -webkit-box-shadow: 2px 2px 10px rgba(0,0,0,0.4);

    -moz-box-shadow: 2px 2px 10px rgba(0,0,0,0.4);

    opacity: 0;

    -moz-transition: opacity 1s;

    -moz-transition-property: opacity;

    -moz-transition-duration: 1s;

    transition-property: opacity;

    transition-duration: 1s

    }

    .tooltip:hover span {font-family: Calibri, Geneva, Tahoma, Arial , sans-serif;  

    position: relative;

    left:80px;

    z-index: 99;

    margin-left: 0;

    width: 110px;

    opacity: 1;

    font-size: 14px;

    -webkit-transition: opacity 1s; 

    -webkit-transition-property: opacity, top, left;

    }

    .tooltip:hover em { font-family: Calibri, Tahoma, Geneva, Arial sans-serif;

    font-size: 1.2em;

    font-weight: bold;

    display: block;

    padding: 0.2em 0 0.6em 0;

    }

    .classic { background: #FFFFAA; border: 1px solid #FFAD33; padding: 4px 9px 4px 9px;}

    En el exe-learning, en el editor de html se pone lo siguiente:

    <a class=”tooltip”>Inicio<span class=”classic”>Enviar</span></a>

    Con esto, te saldrá un tooltip, cutre pero bueno, ya se irá perfeccionando.

  • Author
    Entradas

You must be logged in to reply to this topic.

Skip to content