The Code below shows tooltip at the right side using css when hovered as can been seen in the screenshot below
Please how do I make the tooltip to appear on the top of the name when hovered
<html><head>
</head>
<body>
<div data-tooltip="I am Nancy Moore">
<label>Name</label>
</div>
<style>
div:hover:before {
content: attr(data-tooltip);
position: absolute;
padding: 5px 10px;
margin: -3px 0 0 50px;
background: black;
color: white;
border-radius: 3px;
}
div:hover:after {
content: '';
position: absolute;
margin: 6px 0 0 3px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 10px solid black;
border-bottom: 5px solid transparent;
}
</style>
</body></html>
did you mean that ?
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
label {
position: relative;
white-space: nowrap;
}
label:hover::before {
content: attr(data-tooltip);
bottom: calc(100% + 10px);
left: 50%;
position: absolute;
padding: 5px 10px;
background: black;
color: white;
border-radius: 3px;
transform: translate(-50%, 0);
}
label:hover::after {
content: '';
top: -10px;
left: 50%;
position: absolute;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
transform: translate(-50%, 0);
}
<label data-tooltip="I am Nancy Moore">Name</label>
Set the margin to 0 and z-index:1
margin: -3px 0 0 0;
div:hover:before {
content: attr(data-tooltip);
position: absolute;
padding: 5px 10px;
margin: -3px 0 0 0;
background: black;
color: white;
border-radius: 3px;
z-index:1
}
div:hover:after {
content: '';
position: absolute;
margin: 6px 0 0 3px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 10px solid black;
border-bottom: 5px solid transparent;
}
<div data-tooltip="I am Nancy Moore">
<label>Name</label>
</div>
Related
I am trying to create a div that looks like that. See the top and bottom with the little tab. I cannot figure out how to do this, it is a "design" thing. I have tried to use the :before :after CSS to create this but no luck. Any ideas?
Added code below. You can see it comes to a point, any way to have it flat?
.container {
width: 150px;
height: 75px;
background-color: white;
border: 3px solid #000;
color: #fff;
padding: 20px;
position: relative;
margin: 40px;
float: left;
}
.container.tab-top:before {
content: " ";
position: absolute;
right: 0px;
top: -15px;
border-top: none;
border-right: 90px solid transparent;
border-left: 90px solid transparent;
border-bottom: 15px solid black;
}
.container.tab-bottom:after {
content: " ";
position: absolute;
right: 0px;
bottom: -15px;
border-top: 15px solid black;
border-right: 90px solid transparent;
border-left: 90px solid transparent;
border-bottom: none;
}
<div class="container tab-top tab-bottom">
</div>
Don't use borders for this. Create a pseudo element and use border-radius.
.container {
width: 150px;
height: 75px;
background-color: white;
border: 3px solid #000;
color: #fff;
padding: 20px;
position: relative;
margin: 40px;
float: left;
}
.container.tab-top:before {
content: " ";
position: absolute;
width: 60%;
height: 7px;
left: 50%;
transform: translateX(-50%);
background: black;
border-radius:20px 20px 0 0;
top: -7px;
}
.container.tab-bottom:after {
content: " ";
position: absolute;
width: 60%;
height: 7px;
left: 50%;
transform: translateX(-50%);
background: black;
border-radius:0 0 20px 20px;
bottom: -7px;
}
<div class="container tab-top tab-bottom">
</div>
You can approximate it using perspective and rotation:
.container {
width: 200px;
height: 100px;
border: 3px solid #000;
position: relative;
margin: 40px
}
.container.tab-top:before,
.container.tab-bottom:after {
content: " ";
position: absolute;
left:15%;
right:15%;
height:30px;
background:#000;
}
.container.tab-top:before {
bottom:100%;
border-radius:10px 10px 0 0;
transform-origin:bottom;
transform:perspective(100px) rotateX(50deg);
}
.container.tab-bottom:after {
top:100%;
border-radius:0 0 10px 10px;
transform-origin:top;
transform:perspective(100px) rotateX(-50deg);
}
<div class="container tab-top tab-bottom">
</div>
You need to use Trapezoid Shape css like:
#trapezoid {
border-bottom: 100px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 100px;
}
.box {
display: block;
width: 150px;
height: 200px;
border: 2px solid pink;
position: relative;
}
.box::before {
position: absolute;
content: "";
border-bottom: 10px solid pink;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
height: 0;
width: 100px;
top: -10px;
left: 0;
right: 0;
margin: auto;
}
.box::after {
position: absolute;
content: "";
border-top: 10px solid pink;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
height: 0;
width: 100px;
bottom: -10px;
left: 0;
right: 0;
margin: auto;
}
<div class="box"></div>
I used as before after css of a div.
I added box shadows to the main shape but I can't get it to properply add to the ::before and :after triangles making up the polygon.
When I try to add box-shadow: 0 0 15px 1px #303030; to the form ::before and ::after it gives a shadow around the box containing the pesduo elements
Codepen
* {
box-sizing: border-box;
}
header {
height: 100px;
text-align:center;
line-height: 100px;
background-color: gold;
}
form {
box-shadow: 0 0 15px 1px #303030;
background-color: lightgreen;
margin: -10px auto;
padding: 20px;
width: 240px;
position: relative;
}
form::before {
content: '';
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid lightgreen;
position: absolute;
top: -20px;
left: 50%;
margin-left: -20px;
}
form::after {
content: '';
width: 0;
height: 0;
border-left: 120px solid transparent;
border-right: 120px solid transparent;
border-top: 70px solid lightgreen;
position: absolute;
bottom: -70px;
left: 0;
}
input {
display: block;
width: 100%;
}
Please try maybe it will good for you -
<header>Header</header>
<form>
<label for="lastname">Lastname: </label>
<input type="text" id="lastname" />
<br><br>
<label for="firstname">Firstname: </label>
<input type="text" id="firstname" />
<br>
<br>
<input type="submit" value="Submit">
</form>
* {
box-sizing: border-box;
}
header {
height: 100px;
text-align:center;
line-height: 100px;
background-color: gold;
}
form {
box-shadow: 0 0 15px 1px #303030;
background-color: lightgreen;
margin: -10px auto;
padding: 20px;
width: 240px;
position: relative;
}
form::before {
content: '';
position: absolute;
width: 0;
height: 0;
top: 1px;
left: 50%;
margin-left: -30px;
border: 20px solid black;
border-color: lightgreen lightgreen transparent transparent;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: 3px -3px 3px 0 rgba(0, 0, 0, 0.4);
}
form::after {
content: '';
position: absolute;
width: 0;
height: 0;
bottom: -170px;
left: 0;
border: 85px solid black;
border-color: transparent transparent lightgreen lightgreen;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
input {
display: block;
width: 100%;
}
Link to jsfiddle - http://jsfiddle.net/oj26aLmr/1/
I have an old piece of code that pops up a message on moseover. It is coded with absolute positioning and works fine. But I need to change it to relative positioning so the code works better with mobile devices. In this jsfiddle the top line is using relative and doesn't work. The bottom line is using absolute and is working. Would someone please point out where I am going wrong? Here's my code:
<style>
.tooltips {
position: relative;
display: inline;
}
.spank{
position: absolute;
width:250px;
color: #000;
background: #FFFFFF;
border: 1px solid #ccc;
padding:10px;
text-align: center;
display:none;
border-radius: 7px;
box-shadow: -1px 0px 7px #ccc;
}
.spank:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0; height: 0;
border-top: 10px solid #ccc;
border-right: 10px solid transparent;
border-left: 12px solid transparent;
}
.spank:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #FFFFFF;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.showhim:hover .spank{
display : block;
left:5px;
top:1px;
margin-left: 50px;
z-index: 999
}
.showhim {
left: 50px;
position: relative;
top: 80px;
width: 100px;
}
.spankme{
position: absolute;
width:250px;
color: #000;
background: #FFFFFF;
border: 1px solid #ccc;
padding:10px;
text-align: center;
display:none;
border-radius: 7px;
box-shadow: -1px 0px 7px #ccc;
}
.spankme:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0; height: 0;
border-top: 10px solid #ccc;
border-right: 10px solid transparent;
border-left: 12px solid transparent;
}
.spankme:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #FFFFFF;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.showme:hover .spankme{
display : block;
left: 10px;
top:10px;
margin-left:50px;
z-index: 999
}
.showme {
position: relative;
width: 100px;
}
</style>
<div class="showme">
<div class="showme tooltips">Mouse me</div>
<span class="spankme">Text on popupPlace</span>
</div>
<div class="showhim">
<div class="showit tooltips">Mouse me</div>
<span class="spank">Text on popupPlace</span>
</div>
For the hover that applies to .spankme, you aren't targeting the parent like you did with .spank. The following will allow the parent to reference the child on hover.
Change
.showme:hover .spankme
to
.showhim:hover .spankme
Also, you have three z-index: 999 properties that are missing a closing semi-colon.
I want to add a label on some of my elements on a website and design for a label that is a flag with an inverted V-shaped cut at the bottom.
So far I have this:
HTML
<div class="css-shapes"></div>
CSS
.css-shapes{
border-left: 99px solid #f00fff;
border-right: 99px solid #f00fff;
border-bottom: 39px solid transparent;
}
http://jsfiddle.net/yhexkm4u/2/
However, I need the background to be white and border around this shape in purple and 1px. I was trying to fit the same shape just in white inside of this one, but everything got messy and didn't go as expected.
Maybe it is a wrong approach, but I want to end up with labels that would look something like this:
With CSS:
You can use CSS transforms on pseudo elements to create the background with a transparent inverted triangle at the bottom:
body{background:url('http://lorempixel.com/image_output/food-q-c-640-480-1.jpg');background-size:cover;}
p{
position: relative;
width: 150px; height: 150px;
overflow: hidden;
border-top:3px solid #EF0EFE;
}
p:before, p:after{
content: '';
position: absolute;
top: -3px;
height: 100%; width: 50%;
z-index: -1;
border:2px solid #EF0EFE;
box-sizing:border-box;
}
p:before{
left: 0;
transform-origin: 0 0;
transform: skewY(-20deg);
border-width:0 0 4px 3px;
}
p:after{
right: 0;
transform-origin: 100% 0;
transform: skewY(20deg);
border-width:0 3px 4px 0;
}
<p>Some text ... </p>
Note that you will need to add vendor prefixes on the transform and transform-origin properties to maximize browser support. See canIuse for more information.
With SVG
Another approach is to use an inline SVG with the polygon element:
body{background: url('http://lorempixel.com/image_output/food-q-c-640-480-1.jpg');background-size: cover;}
div{position: relative;width: 100px; height: 150px;}
svg{position: absolute;width: 100%;height: 100%;z-index: -1;}
<div>
<svg viewbox="-1.5 -1.5 103 153">
<polygon points="100 0, 100 100, 50 85, 0 100, 0 0" fill="transparent" stroke-width="3" stroke="#ef0efe"/>
</svg>
<p>Some text ... </p>
</div>
Here is a slightly different method using pseudo-elements and transform rotations to create an outlined banner like this:
This angled shape is created with position: absolute pseudo-elements, :before and :after:
The excess is cut off with overflow: hidden on the parent to form our banner:
The outline is created with box-shadow and the two angles are prevented from overlapping by pulling / pushing the x-axis by 46px — box-shadow: 46px 0 0 3px #000
Full Example
div {
height: 100px;
width: 100px;
margin: 100px auto;
position: relative;
overflow: hidden;
border: solid 3px #000;
border-bottom: none;
text-align: center;
}
div:before,
div:after {
content: '';
display: block;
height: 100%;
width: 200%;
transform: rotate(20deg);
box-shadow: 46px 0 0 3px #000;
position: absolute;
top: 1px;
right: -120%;
}
div:after {
transform: rotate(-20deg);
left: -120%;
box-shadow: -46px 0 0 3px #000;
}
<div>Text</div>
STOLEN FROM CSS-SHAPES
#flag {
width: 110px;
height: 56px;
padding-top: 15px;
position: relative;
background: red;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
}
#flag:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 13px solid #eee;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
DEMO:
#flag {
width: 110px;
height: 56px;
padding-top: 15px;
position: relative;
background: red;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
}
#flag:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 13px solid #eee;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
<div id="flag"></div>
My Approach
My approach uses skewed elements, and allows you to quickly position them to your needs.
div {
height: 100px;
width: 100px;
position: relative;
border-left: 10px solid tomato;
border-top: 10px solid tomato;
border-right: 10px solid tomato;
text-align: center;
line-height: 100px;
font-size: 30px;
}
div:before {
content: "";
position: absolute;
height: 50%;
width: 50%;
left: -10px; /*width of border*/
bottom: -30px;
z-index: -2;
-webkit-transform: skewY(-20deg);
transform: skewY(-20deg);
border-bottom: 10px solid tomato;
border-left: 10px solid tomato;
}
div:after {
content: "";
position: absolute;
height: 50%;
width: 50%;
right: -10px; /*width of border*/
bottom: -30px;
z-index: -2;
-webkit-transform: skewY(20deg);
transform: skewY(20deg);
border-bottom: 10px solid tomato;
border-right: 10px solid tomato;
}
div:hover, div:hover:before, div:hover:after{
background:lightgray;
}
<div>TEXT</div>
I've had a go at updating your CSS to create the effect you want:
.css-shapes {
height: 250px;
width: 0px;
border-left: 99px solid #f00fff;
border-right: 99px solid #f00fff;
border-bottom: 39px solid transparent;
position: relative
}
.n-shape {
height: 248px;
width: 0px;
border-left: 95px solid #ffffff;
border-right: 95px solid #ffffff;
border-bottom: 39px solid transparent;
position: absolute;
top: -6px;
right: -95px;
}
.top {
position: absolute;
top: 0px;
width: 198px;
height: 2px;
background-color: #f00fff;
left: -99px;
border-bottom: 1px solid #f00fff;
}
<div class="css-shapes">
<div class="n-shape"></div>
<div class="top"></div>
</div>
Fiddle: http://jsfiddle.net/dywhjwna/
Here is what I came up with.
Link Fiddle
It correspond to what you were looking for however I guess there should be a "better way" to it rather than playing with border.
HTML
<div id="text-div">
Text
</div>
<div id="pacman">
<div id="left-triangle"></div>
<div id="right-triangle"></div>
</div>
CSS
#text-div {
width: 118px;
height: 60px;
text-align: center;
border: 1px solid purple;
border-bottom: 0px;
line-height: 60px;
}
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid purple;
border-top: 0px;
border-left: 60px solid purple;
border-bottom: 60px solid transparent;
}
#left-triangle{
position: relative;
left: -59px;
border-right: 58px solid transparent;
border-top: 0px;
border-left: 58px solid white;
border-bottom: 58px solid transparent;
}
#right-triangle{
position: relative;
top: -59px;
left: -57px;
border-right: 58px solid white;
border-top: 0px;
border-left: 58px solid transparent;
border-bottom: 58px solid transparent;
}
A quick workaround is to rotate it:
transform: rotate(90deg);
Fiddle
Another solution would be an SVG path, here's a fiddle!.
A better solution with text easily positioned in the middle, using a rectangle background and a triangle at the bottom.
.css-shapes{
position: relative;
height: 250px;
width: 150px;
background: #FFD05B;
color: #fff;
text-align: center;
line-height:225px;
font-size: 90px;
box-sizing: border-box;
}
.css-shapes:after{
content: '';
position:absolute;
left:0;
bottom: 0;
display: block;
width: 100%;
height:50px;
border-bottom: 25px solid #fff;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
box-sizing: border-box;
}
<div class="css-shapes">1</div>
How do I create the following arrow using pure CSS ?
So Far, I have this:
<style>
.halfCircleLeft{
float:left;
height:50px;
width:40px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background:green;
}
</style>
<div class="bottom_boxes_section">
<div class="halfCircleLeft">Left</div>
</div>
Here's a Working Fiddle
Or a bigger One
<div class="HalfCircleLeft"></div>
.HalfCircleLeft
{
margin: 100px;
height: 100px;
width: 50px;
border-radius: 0 50px 50px 0;
background-color: #cfa040;
position: relative;
}
.HalfCircleLeft:before
{
content: "";
position: absolute;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid black;
top: 40px;
left: 10px;
}
.HalfCircleLeft:after
{
content: "";
position: absolute;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #cfa040;
top: 40px;
left: 13px;
}
Here's a first crude mockup based on your code and the css from cssarrowplease.com. Basically, it uses two CSS triangles, one a bit smaller than the other to create the arrow shape.
<style>
.halfCircleLeft{
float:left;
height:50px;
width:40px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background:#00FF00;
}
.arrow_box {
position: relative;
top: 50%;
}
.arrow_box:after, .arrow_box:before {
right: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(0, 255, 0, 0);
border-right-color: #00ff00;
border-width: 10px;
top: 50%;
margin-top: -10px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-right-color: #000000;
border-width: 16px;
top: 50%;
margin-top: -16px;
}
</style>
<div class="bottom_boxes_section">
<div class="halfCircleLeft"><div class="arrow_box"></div></div>
</div>