Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
Obtenemos el valor de un atributo data
Ya conseguimos que el popup se abra al hacer clic en cualquier botón. Ahora hay que mostrar dentro el texto correcto. El texto de la ayuda está guardado en el marcado, en el atributo data-tooltip-text del propio botón.
Los atributos con el prefijo data- se usan para guardar información adicional directamente en el marcado. Después del prefijo va el nombre del atributo, que elige quien desarrolla.
Por ejemplo:
<div data-cat-name="Cupcake">Para obtener el valor de ese atributo en JavaScript, se usa la propiedad dataset. Después se escribe el nombre del atributo sin el prefijo data-:
elemento.dataset.nombreDelAtributoSinPrefijoSi el nombre del atributo tiene varias palabras y contiene guiones, en JavaScript se escribe en estilo camelCase: se quitan los guiones y cada palabra después de la primera empieza con mayúscula. El valor del atributo del ejemplo anterior se puede obtener así:
let element = document.querySelector('div');
console.log(element.dataset.catName); // Mostrará: CupcakeEn nuestro sitio, los textos de las ayudas se guardan en el atributo data-tooltip-text de cada botón. Veamos cómo se ve en el marcado y luego mostremos en la consola el valor de ese atributo para cada botón.
Cuando crees atributos propios, conviene usar justamente el prefijo data-. Así el código sigue siendo válido y se mantiene dentro del estándar.
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">49</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">
<li class="user-comment">¿Y qué opinan de los drones de Keksoflot? No es publicidad.</li>
<li class="user-comment">Yo mismo soy un dron, créanme, no todo es tan simple.</li>
</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>
<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 closeButton = document.querySelector('.close-button');
let tooltipButtons = document.querySelectorAll('.tooltip-button');
console.log(tooltipButtons[0]);
console.log(tooltipButtons[1]);
tooltipButtons[0].onclick = function () {
tooltip.classList.add('opened');
};
tooltipButtons[1].onclick = function () {
tooltip.classList.add('opened');
};
closeButton.onclick = function () {
tooltip.classList.remove('opened');
};
// Agrega aquí la salida en la consola
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
- Fíjate en cómo se ve el atributo
data-tooltip-texten el marcado y luego ve al archivotooltip.js. - En la línea 19, muestra en la consola
tooltipButtons[0].dataset.tooltipText.
Fíjate en que apareció el contenido del atributodata-tooltip-textdel primer botón. - En la línea siguiente, muestra en la consola el contenido del atributo
data-tooltip-textdel segundo botón.