Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Web Development Articles
Page 209 of 801
Create tooltips with CSS
A tooltip is visible when a user moves the mouse cursor on a text. You can add information in it to make it easy for users to understand.ExampleYou can try to run the following code to learn how to create tooltip − #mytooltip #mytext { visibility: hidden; width: 100px; background-color: black; color: #fff; text-align: center; border-radius: 3px; padding: 10px 0; position: absolute; z-index: 1; } #mytooltip:hover #mytext { visibility: visible; } Hover the mouse over me My Tooltip text
Read MoreHow to position tooltips correctly with CSS
To position tooltips correctly, use the right, left, top and bottom properties.Let us see how to position tooltips on the right:Example .mytooltip .mytext { visibility: hidden; width: 140px; background-color: blue; color: #fff; z-index: 1; top: -6px; left: 100%; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; } .mytooltip { position: relative; display: inline-block; } .mytooltip:hover .mytext { visibility: visible; } Keep mouse cursor over me My Tooltip text
Read MoreSet right tooltip with CSS
To set right tooltip, use the left CSS property.You can try to run the following code to set right tooltip to a textExample .mytooltip .mytext { visibility: hidden; width: 140px; background-color: blue; color: #fff; z-index: 1; top: -6px; left: 100%; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; } .mytooltip { position: relative; display: inline-block; } .mytooltip:hover .mytext { visibility: visible; } Keep mouse cursor over me My Tooltip text
Read MoreUsage of CSS transition-timing-function property
Use the transition-timing-function property to set the speed curve of the transition effect. The values you can set are ease, ease-in, ease-out, linear, etc.You can try to run the following code to set the speed curve of the transition effect with CSSExample div { width: 100px; height: 100px; background: red; transition: width 4s; } #effect1 { transition-timing-function: linear; } #effect2 { transition-timing-function: ease-in; } div:hover { width: 250px; } Transition Effect Hover over the div elements and see the transition effect and the speed: linear effect ease-in effect
Read MoreCSS animation-direction property
Use the animation-direction property to set whether an animation should be played forwards, backward or in alternate cycles.You can try to run the following code to implement the animation-direction property:Example div { width: 150px; height: 200px; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: reverse; } @keyframes myanim { from { background-color: green; } to { background-color: blue; } }
Read MoreHow to select elements with an attribute value containing a specified word with CSS?
Use the [attribute ~= "value"] selector to select elements with an attribute value containing a specified word with CSS.You can try to run the following code to implement the [attribute ~= "value"] selector. Here, the word we are searching is “Tutorials”,Example [alt ~= Tutorials] { border: 5px solid orange; border-radius: 5px; }
Read MoreArrow to the left of the tooltip with CSS
Use the right CSS property to add arrow to the right of the tooltip.You can try to run the following code to add a tooltip with arrow to the leftExample .mytooltip .mytext { visibility: hidden; width: 140px; background-color: blue; color: #fff; z-index: 1; top: -5px; left: 110%; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; } .mytooltip { position: relative; display: inline-block; margin-left: 50px; } .mytooltip .mytext:after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 6px; border-style: solid; border-color: transparent blue transparent transparent; } .mytooltip:hover .mytext { visibility: visible; } Keep mouse cursor over me My Tooltip text
Read MoreSelects all <div> elements and all <p> elements with CSS
To style, more than one element, use a comma. Separate each element with the comma to achieve this. You can try to run the following code to select and elements,Example div, p { color: blue; background-color: orange; } Demo Website Fruits Fruits are good for health. This is demo text.
Read MoreSelects all <p> elements inside <div> elements with CSS
Use the element element selector to select all elements inside another element.You can try to run the following code to implement element element selector,Example div p { color: white; background-color: blue; } Demo Website Fruits Fruits are good for health. This is demo text.
Read MoreHow to apply a 2D or 3D transformation to an element with CSS
Apply a 2D or 3D transformation to an element with the transform property in CSS. You can try to run the following code to rotate an element using transformationExample div { width: 200px; height: 100px; background-color: gray; transform: rotate(10deg); } Rotation Demo
Read More