Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
Revisamos las ayudas emergentes
¡Miau! El nuevo pasante intentó hacer las ayudas emergentes, pero no lo logró. En ti sí puedo confiar, así que averigua por qué no funciona el script.
Seguimos trabajando en un sitio web de noticias sobre tecnología. Para que las personas no se distraigan buscando palabras o nombres desconocidos, Cupcake decidió agregar ayudas emergentes a la página.
Las palabras que necesitan una explicación están marcadas como botones con la clase tooltip-button:
<button class="tooltip-button" type="button">DogDrones.inc</button>Al hacer clic en una de estas palabras convertidas en botón, debe aparecer una pequeña ventana, es decir, un popup. Dentro del popup se muestra la ayuda. En inglés, a este tipo de ayuda se le llama tooltip.
El pasante que trabajó en esta tarea usó el método querySelector para encontrar los elementos necesarios y añadió manejadores onclick a estos botones. Cuando se hace clic en un botón, el popup recibe la clase opened y la ayuda aparece en la página:
let tooltip = document.querySelector('.tooltip');
let tooltipButton = document.querySelector('.tooltip-button');
tooltipButton.onclick = function () {
tooltip.classList.add('opened');
};Al pulsar el botón «Cerrar», la clase opened se elimina y la ayuda desaparece:
let closeButton = document.querySelector('.close-button');
closeButton.onclick = function () {
tooltip.classList.remove('opened');
};A primera vista, el código parece correcto. Pero el jefe dice que el script no funciona. Vamos a comprobar cuál es el problema.
Todos los archivos
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
<title>FlashNews!</title>
</head>
<body class="page light-theme">
<header class="page-header">
<div class="container">
<span class="header-logo">
<img src="img/main-logo.svg" width="67" height="29" alt="Logotipo del portal FlashNews!">
</span>
<button class="theme-button" type="button">Cambiar tema</button>
</div>
</header>
<main class="inner-news">
<div class="tooltip">
<span class="tooltip-text"></span>
<button class="button close-button" type="button"><span>Cerrar</span></button>
</div>
<article class="container">
<h1 class="inner-heading">Dronovirus</h1>
<div class="news-full">
<img src="img/drone.jpg" alt="Dron pequeño">
<div class="news-stats">
<button class="heart" type="button"><span class="likes-number">28</span></button>
<time datetime="2019-12-22">22 de diciembre de 2019</time>
</div>
<p>Los diseñadores del laboratorio <button class="tooltip-button" type="button" data-tooltip-text="un laboratorio bastante mediocre">DogDrones.inc</button> aseguraron que sus drones no pueden transmitir virus peligrosos porque no están programados para eso. <button class="tooltip-button" type="button" data-tooltip-text="aunque eso no está del todo claro; nota del abogado">Tal vez</button>, la verdadera razón es que los drones del laboratorio no pueden transportar absolutamente nada.</p>
</div>
</article>
<section class="comment-feed container">
<h2>Comentarios</h2>
<ol class="comment-list">
</ol>
<form action="https://codigoheroe.com/courses" method="post" class="comment-form">
<div class="comment-inner">
<label class="comment-label" for="comment-textarea">Tu comentario</label>
<textarea class="comment-field comment-area" rows="3" placeholder="Comentario" required id="comment-textarea"></textarea>
</div>
<span class="text-counter">Se usaron <output class="char-counter" for="comment-textarea">0</output>/142 caracteres</span>
<button class="button submit-button" type="submit">Enviar</button>
</form>
</section>
</main>
<footer class="page-footer">
<div class="container">
<p>© FlashNews!</p>
<span class="footer-logo">
<img src="img/white-logo.svg" alt="Logotipo del portal FlashNews!">
</span>
</div>
</footer>
<script src="themes.js"></script>
<script src="likes.js"></script>
<script src="comments.js"></script>
<script src="tooltip.js"></script>
</body>
</html>
/* Estilos del texto del botón */
.tooltip-button {
cursor: pointer;
position: relative;
padding: 1px 8px;
border: none;
color: inherit;
font: inherit;
}
.tooltip-button::after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 0;
border: 4px solid;
border-left-color: transparent;
border-bottom-color: transparent;
}
/* Estilos del tooltip */
@keyframes tooltip-opener {
0% {
transform: translate(50%) scaleX(0);
}
100% {
transform: translate(100%) scaleX(100%);
}
}
.tooltip {
z-index: 2;
display: none;
flex-direction: row-reverse;
position: fixed;
max-width: 256px;
right: 0;
top: 160px;
border-radius: 8px 0 0 8px;
}
.opened {
display: flex;
animation: tooltip-opener 150ms;
}
.tooltip-text {
display: flex;
align-items: center;
padding: 10px;
}
.close-button {
min-height: 64px;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
margin: 0;
padding: 0;
border-radius: 8px 0 0 8px;
}
.close-button span {
display: inline-block;
vertical-align: middle;
transform: rotate(-90deg);
}
/* Estilos del bloque de entrada de comentarios */
.comment-area {
height: unset;
resize: none;
margin-bottom: 10px;
padding-top: 4px;
padding-bottom: 4px;
line-height: 24px;
}
.text-counter {
display: inline-block;
vertical-align: baseline;
padding: 7px 0;
margin-right: auto;
}
.comment-form.warning .comment-label {
color: #f05b29;
}
.comment-form.warning .comment-area {
color: #f05b29;
border-color: #f05b29;
}
.comment-form.warning .comment-area:focus {
outline-color: #f05b29;
}
.comment-form.warning .char-counter {
color: #f05b29;
font-weight: bold;
}
.submit-button:disabled {
opacity: 0.25;
}
/* Temas de color */
.light-theme .tooltip {
background-color: #ffffff;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
}
.light-theme .tooltip-button {
background-color: #f2f2f2;
}
.light-theme .tooltip-button:focus,
.light-theme .tooltip-button:hover {
background-color: #6653d9;
color: #ffffff;
outline-color: #b6aaff;
}
.tooltip-button:active {
opacity: 0.6;
}
.light-theme .tooltip-button::after {
border-right-color: #6653d9;
border-top-color: #6653d9;
}
.dark-theme .tooltip {
background-color: #2a2930;
box-shadow: 0 0 16px rgba(0, 0, 0, 1);
}
.dark-theme .tooltip-button {
background-color: #0a0910;
}
.dark-theme .tooltip-button:focus,
.dark-theme .tooltip-button:hover {
outline-color: #6653d9;
background-color: #b6aaff;
color: #17161a;
}
.dark-theme .tooltip-button::after {
border-right-color: #b6aaff;
border-top-color: #b6aaff;
}
let tooltip = document.querySelector('.tooltip');
let tooltipButton = document.querySelector('.tooltip-button');
let closeButton = document.querySelector('.close-button');
tooltipButton.onclick = function () {
tooltip.classList.add('opened');
};
closeButton.onclick = function () {
tooltip.classList.remove('opened');
};
let commentForm = document.querySelector('.comment-form');
let commentList = document.querySelector('.comment-list');
let commentField = document.querySelector('.comment-field');
commentForm.onsubmit = function (evt) {
evt.preventDefault();
let newComment = document.createElement('li');
newComment.classList.add('user-comment');
newComment.textContent = commentField.value;
commentField.value = '';
commentList.append(newComment);
};
let page = document.querySelector('.page');
let themeButton = document.querySelector('.theme-button');
themeButton.onclick = function () {
page.classList.toggle('light-theme');
page.classList.toggle('dark-theme');
};
let heart = document.querySelector('.heart');
let likesNumber = document.querySelector('.likes-number');
heart.onclick = function () {
if (heart.classList.contains('added')) {
likesNumber.textContent--;
} else {
likesNumber.textContent++;
}
heart.classList.toggle('added');
};
El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
100%
Consola
- En el mininavegador, haz clic en
DogDrones.incdentro del texto de la noticia. Luego cierra el popup que apareció a la derecha con el botón «Cerrar». - Haz clic en la palabra
Tal vez. Fíjate en que el popup no aparece. - En el editor de código, abre la pestaña
Todos los archivosy ve al archivodrones.html. Fíjate en que, en el marcado de la línea 34, ambos botones tienen la clasetooltip-button.