Partile de cod din aceasta pagina va arata cum puteti crea un efect de tooltip animat doar cu atribute HTML, CSS pseudo-elemente, si proprietatile CSS de animatie si 'content'.
Iata codul.
<style> @keyframes anim_tlt { 0% { bottom:50%; font-size: 1px; right: 95%; } 100% { bottom: 100%; font-size: 17px; right: 2%; } } .tlt_parent { margin:35px auto; text-align:center; } .tlt_parent .tlt_ex { background: #abcdef; display: inline-block; making: 0 4px; position: relative; padding: 20px 1px; text-align: center; width: 130px; } .tlt_parent .tlt_ex:hover:before { animation-name: anim_tlt; animation-duration: 1.2s; background: #fcb0b0; border-radius: 6px; bottom: 100%; color: #0000d0; content: attr(data-titl); font-size: 17px; margin: 0; padding: 0 2px 1px 2px; position: absolute; right: 2%; } </style>- HTML:
<div class='tlt_parent'> <div class='tlt_ex' data-titl='Hello to Me'>Tooltip with CSS.</div> <div class='tlt_ex' data-titl='Peace is Good'>Have a Good Life.</div> <div class='tlt_ex' data-titl='We are happy'>I am Happines.</div> </div>
data-titl
contine textul pentru tooltip, dar puteti folosi oricare alt atribut, de exemplu "title", in acest caz folositi: content: attr(title);
.<input type="color" name="get_color" />
#some_id:hover { transform: rotate(60deg); -ms-transform: rotate(60deg); /* IE 9 */ -moz-transform: rotate(60deg); /* Firefox */ }
var maxn = Math.max(8, 4, 88, 56); alert(maxn); // 88
include_once("un_fisier.php");
Most people arrived ahead of time. - Cei mai multi oameni au sosit inainte de vreme (prea devreme).
Este fruto es buenísimo. - Acest fruct este extrem /nemaipomenit de bun.