A continuación, me di cuenta de la información sobre herramientas (ver código de fragmento).
body { font-family: 'Arial', sans-serif; line-height: 1; min-height: 100vh; display: flex; justify-content: center; align-items: center; } *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } .button { position: relative; cursor: pointer; border: none; text-transform: uppercase; font-family: 'Montserrat', sans-serif; color: #fff; background-color: #21262b; border-radius: 5px; padding: 10px; font-weight: 700; } .button { margin: 0 10px; } .button::after { position: absolute; content: attr(data-tooltip); background: #21262b; padding: 5px; white-space: nowrap; border-radius: 5px; font-weight: 400; text-transform: none; min-width: 50px; left: 50%; top: -100%; transform: translateX(-50%); } .button::before { content: ""; width: 10px; height: 10px; background: #21262b; position: absolute; top: -50%; left: 50%; transform: rotate(45deg) translate(0, 50%); } .button::before, .button::after { opacity: 0; } .button:hover::before, .button:hover::after { opacity: 1; } <button data-tooltip="Lorem Ipsum" class="button">Tooltip Button</button> <button data-tooltip="Lorem Ipsum" class="button">Tooltip Button</button> <button data-tooltip="Lorem Ipsum" class="button">Tooltip Button</button> <button data-tooltip="Lorem Ipsum" class="button">Tooltip Button</button>Quiero agregar un atributo de datos adicional para cada botón. Permítanme decir que sería data-tooltip-left, data-tooltip-bottom, data-tooltip-top, data-tooltip-right. Y para un pseudo elemento separado después de que quiero cambiar de posición. ¿O simplemente debería eliminar la información sobre herramientas de datos de atributos generales? Y para cada uno de los datos, información sobre herramientas, posición aplicando los mismos estilos pero en una posición diferente.
Utilice selectores de atributos .
En su caso, puede establecer una posición como esta data-tooltip-position="bottom" .
El único atributo de posición es suficiente para evitar errores de posición múltiple como este data-tooltip-bottom="" data-tooltip-top=""
Para obtener más posición de combinación, puede usar data-tooltip-position="bottomleft" .
Ejemplo:
<button data-tooltip="Lorem Ipsum" class="button">Tooltip Button</button> <button data-tooltip="Lorem Ipsum bottom" class="button" data-tooltip-position="bottom">Tooltip Button</button>En CSS, use un selector como este.
.button[data-tooltip-position="bottom"]::after { top: auto; bottom: -100%; } .button[data-tooltip-position="bottom"]::before { top: 100%; transform: rotate(45deg) translate(0, 100%); }/ intenta usar de esta manera /
a:after { content: " (" attr(href) ")"; }/ este enlace también te puede ayudar /