The code snippet presented in this page shows you how to create an animated tooltip effect using HTML attributes, CSS pseudo-elements, animation and content properties.
Here is the code.
<style> @keyframes anim_tlt { 0% { bottom:50%; font-size: 1px; right: 95%; } 100% { bottom: 100%; font-size: 17px; right: 2%; } } .tlt_ex { background: #abcdef; display: inline-block; making: 0 4px; position: relative; padding: 20px 1px; text-align: center; width: 130px; } .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> <h4>Example Animated Tooltip with HTML and CSS</h4> <p>Position the mouse over the blue rectangle</p> <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>
data-titl
attribute contains the text for tooltip, but you can use any other attribute, for example the "title", in this case use: content: attr(title);
.Some content ... <hr /> Content under line ...
h2 { color: #cbdafb; }
var str = "Web courses - http://CoursesWeb.net/"; if(str.indexOf("http://") == -1) alert("http:// isn`t in string"); else alert("http:// is in string");
$str = "apple,banana,melon,pear"; $arr = explode(",", $str); var_export($arr); // array (0=>"apple", 1=>"banana", 2=>"melon", 3=>"pear")