Develop Reference

Add tooltip arrow with border only background color should be transparent using css [duplicate]

This question already has answers here:
Speech bubble with arrow
(3 answers)
Closed 1 year ago.
I'm trying to add a tooltip arrow at the bottom left. Here I use pseudo-classes I want this should be transparent but when I give transparent to :before white color is coming to the top. I had tried but unable to achieve the desired output. Can anyone suggest to me how can I achieve this output. Any help will be appreciated.
body {
background-image: url('https://i.ibb.co/wcTv3Jf/download.jpg');
display: flex;
justify-content: center;
align-items: center;
}
.tolltip {
width: 250px;
height: 150px;
background: #80808000;
border: 3px solid white;
border-radius: 10px 10px 10px 0;
position: relative;
}
.tolltip:after,
.tolltip:before {
content: "";
position: absolute;
left: -3px;
bottom: -40px;
width: 40px;
height: 40px;
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.tolltip:before {
background: #fff;
}
.tolltip:after {
background: #80808000;
bottom: -32px;
width: 38px;
left: 0px;
}
<div class="tolltip">
contnet
</div>
Desired output

One of solutions
body{
background: darkgray;
display: flex;
justify-content: center;
align-items: center;
}
.tolltip{
width: 250px;
height: 150px;
background: gray;
border: 3px solid white;
border-radius: 10px 10px 10px 0;
position: relative;
}
.tolltip:after,
.tolltip:before{
content: "";
position: absolute;
left: -3px;
bottom: -40px;
width: 40px;
height: 40px;
background: red;
clip-path: polygon(0 0, 100% 0, 0 100%);
background: white;
}
.tolltip:after{
background: gray;
bottom: -32px;
width: 38px;
left: 0px;
}
<div class="tolltip">
contnet
</div>
Edit after updating question.
body{
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(121,9,49,1) 35%, rgba(0,212,255,1) 100%);
display: flex;
justify-content: center;
align-items: center;
}
.tolltip{
width: 250px;
height: 150px;
background: transparent;
border: 3px solid white;
border-radius: 10px 10px 10px 0;
position: relative;
border-bottom-color: transparent;
//
padding: 20px;
}
.tolltip:after{
content: "";
position: absolute;
left: -3px;
bottom: -38px;
width: 40px;
height: 40px;
background: red;
clip-path: polygon(0 0, 3px 0, 3px 38px, 36px 0, 40px 0, 0px 45px) ;
background: white;
}
.tolltip:before{
content: "";
position: absolute;
left: 33px;
right: 0px;
bottom: 0;
border-bottom: 3px solid white;
}
<div class="tolltip">
<h3>content</h3>
</div>

How to put a tooltip centered under a div?

How can I place the tooltip centered and directly under the red circle without Javascript? Thank you in advance! :-)
Here is an image of my problem and the marked position where it should be:
My code currently looks like this:
HTML code:
<li>
<a class="ovm-oup_tooltip" href="#">
<div id="ovm-oup_under_item_1" class="ovm-oup_under_item">
<span>Text</span>
<img src="Example_Logo.svg" alt="">
</div>
</a>
</li>
CSS code:
#ovm-oup_under ul{
text-align: center;
list-style-type: none;
padding: 0;
}
#ovm-oup_under li{
padding: 20px;
margin: 15px;
display: inline-block;
}
.ovm-oup_under_item{
width: 96px;
height: 96px;
border-radius: 50%;
box-shadow: 0 0 20px 5px rgba(0,0,0,.2);
margin: 5px 5px 35px 5px;
}
.ovm-oup_tooltip {
position: relative;
display: inline;
}
.ovm-oup_tooltip span {
position: absolute;
width: auto;
padding: 3px 15px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 4px;
}
.ovm-oup_tooltip span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.ovm-oup_tooltip:hover span {
visibility: visible;
margin: 0;
top: 0%;
left: 50%;
z-index: 999;
}

One solution would be to combine absolute placement of the tooltip (relative to the parent div), with a translation transformation on the tooltip, which would achieve the required placement:
/* Extracted styling to top of style sheet to show the required additions */
.ovm-oup_tooltip span {
/* Offset the tooltip 50% from left side of parent (div) width
and 100% from top edge of parent height */
left: 50%;
top: 100%;
/* Pull the tooltip back 50% of it's own width, nudge the tool
tip downward 8px to account for arrow point */
transform: translate(-50%, 8px);
}
.ovm-oup_under_item {
/* Allow absolute placement of children (tooltip) */
position: relative;
}
/* Your existing styling starts here */
.ovm-oup_under_item {
width: 96px;
height: 96px;
border-radius: 50%;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, .2);
margin: 5px 5px 35px 5px;
}
.ovm-oup_tooltip {
position: relative;
display: inline;
}
.ovm-oup_tooltip span {
position: absolute;
width: auto;
padding: 3px 15px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 4px;
}
.ovm-oup_tooltip span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.ovm-oup_tooltip:hover span {
visibility: visible;
margin: 0;
/* Remove
top: 0%;
*/
left: 50%;
z-index: 999;
}
<a class="ovm-oup_tooltip" href="#">
<div id="ovm-oup_under_item_1" class="ovm-oup_under_item">
<span>Text</span>
<img src="Example_Logo.svg" alt="">
</div>
</a>
The idea here is to use absolute placement of the tooltip (ie the span), to position the top-left corner of that span at the horizontal center, and bottom edge of the parent div. The transform rule is then used to offset the tooltip span relative to it's own dimensions, to achieve the final center/baseline placement.
You can merge the additions above with your existing styling - I extracted the changes to the top of the stylesheet to clarify the additons that were made to achieve the desired result. Hope that helps!

How to make this Gauge differential angles?

I am creating a radial gauge for a dashboard. The following code is my work.
I need to know how to make the starting angle of this to be 15 degrees and how to make the ending angle 165 degrees. Please help me with it.
I need to implement this system so looking forward to getting this done.
I also need to add the tick marks t this. How can I do it? I am trying to use Chart JavaScript for that so please guide me on how can i do it?
Regards.
body {
background: #fff;
}
#radial:before {
background: yellowgreen;
border-radius: 220px 220px 0 0;
/* box-shadow: 3px 1px 8px rgba(2, 1, 1, 0.15) inset; */
content: "";
height: 100px;
position: absolute;
width: 350px;
}
#radial {
border-radius: 400px 400px 0 0;
height: 100px;
margin: 50px auto 0;
overflow: hidden;
position: relative;
width: 200px;
}
#radial:after {
background: rgb(255, 255, 255);
border-radius: 140px 140px 0 0;
bottom: 0;
box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15);
/* color: rgba(255, 80, 0, 0.7); */
content: "";
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 3.5em;
font-weight: 100;
height: 70px;
left: 30px;
line-height: 95px;
position: absolute;
text-align: center;
width: 140px;
}
#needle {
background: radial-gradient(black, red);
border-radius: 8px;
bottom: -4px;
/* box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4); */
display: block;
height: 8px;
position: absolute;
width: 100px;
transform-origin: 100% 4px;
transform: rotate(0deg);
transition:4s ;
z-index: 2;
/* border-top-left-radius: 5px;
border-top-right-radius: 5px; */
clip-path: polygon(100% 0%, 0% 50%, 100% 100% );
}
#radial:hover span {
transform: rotate(180deg);
}
/* h1,
p,
strong {
display: block;
font-family: Lato;
text-align: center;
}
h1 {
margin-bottom: 0.1em;
}
p {
margin-top: 0;
}
strong {
color: #be1e1e;
font-size: 2.5em;
} */
<html>
<head>
<tite></tite>
<link rel="stylesheet" href="GaugeCss_last.css">
<!-- <script type="text/javascript"></script> -->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<head>
</head>
<body>
<div id="radial" data-value="0">
<span id="needle" value="8"></span>
</div>
</body>
<script>
</script>
</html>

Please check may be you want this
body {
background: #fff;
}
#radial:before {
background: yellowgreen;
border-radius: 220px 220px 0 0;
/* box-shadow: 3px 1px 8px rgba(2, 1, 1, 0.15) inset; */
content: "";
height: 100px;
position: absolute;
width: 350px;
}
#radial {
border-radius: 400px 400px 0 0;
height: 100px;
margin: 50px auto 0;
overflow: hidden;
position: relative;
width: 200px;
}
#radial:after {
background: rgb(255, 255, 255);
border-radius: 140px 140px 0 0;
bottom: 0;
box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15);
/* color: rgba(255, 80, 0, 0.7); */
content: "";
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 3.5em;
font-weight: 100;
height: 70px;
left: 30px;
line-height: 95px;
position: absolute;
text-align: center;
width: 140px;
}
#needle {
background: radial-gradient(black, red);
border-radius: 8px;
bottom: -4px;
/* box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4); */
display: block;
height: 8px;
position: absolute;
width: 100px;
transform-origin: 100% 4px;
transform: rotate(15deg);
transition:4s ;
z-index: 2;
/* border-top-left-radius: 5px;
border-top-right-radius: 5px; */
clip-path: polygon(100% 0%, 0% 50%, 100% 100% );
}
#radial:hover span {
transform: rotate(165deg);
}
/* h1,
p,
strong {
display: block;
font-family: Lato;
text-align: center;
}
h1 {
margin-bottom: 0.1em;
}
p {
margin-top: 0;
}
strong {
color: #be1e1e;
font-size: 2.5em;
} */
<html>
<head>
<tite></tite>
<link rel="stylesheet" href="GaugeCss_last.css">
<!-- <script type="text/javascript"></script> -->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<head>
</head>
<body>
<div id="radial" data-value="0">
<span id="needle" value="8"></span>
</div>
</body>
<script>
</script>
</html>

You need to change 2 things at your css
1 - for ID #needle
transform: rotate(15deg);
2 - for hover #radial:hover span
transform: rotate(165deg);

How to remove style from child div using css or js?

I have apply opacity using 'rgba' on parent div and i don't want to inherit this effect on child div.. How can i restrict rgba style from child element...
i have posted images as well for better assistance.
'http://imgur.com/a/YxipO' = (actual image of my code)
'http://imgur.com/a/7ltDa' = (what i want to do using css or js)
.banner-inner {
background-color: rgba(255,255,255,0.2);
padding: 3%;}
.logo-circle {
width: 15%;
border: 7px solid #fff;
border-radius: 50%;
padding: 16px;}

You can use a box shadow, like this
.content {
height: 200px;
width: 300px;
position: relative;
background: url(http://lorempizza.com/500/350/);
background-size: cover;
}
.logo-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
border: 7px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 1000px rgba(255,255,255,0.5);
/* background: rgba(0,0,0,0.5); uncomment if you want a semi transparent
opacity inside circle
*/
}
<div class="content">
<div class="logo-circle"></div>
</div>

You may consider following example approach:
.content {
height: 200px;
width: 200px;
position: relative;
}
.banner-inner {
background-color: rgba(0, 0, 0, 0.2);
padding: 3%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.logo-circle {
width: 1em;
border: 7px solid #fff;
border-radius: 50%;
padding: 1em;
z-index: 2;
height: 1em;
position: absolute;
top: 50%;
margin-top: -1.5em;
left: 50%;
margin-left: -1.5em;
}
<div class="content">
<div class="banner-inner"></div>
<div class="logo-circle"></div>
</div>

For background in circle use RGBA
.logo-circle {
background: rgba(0, 0, 0, 0.2);
width: 15%;
border: 7px solid #fff;
border-radius: 50%;
padding: 16px;
}

You could use the same picture (as seen in the background) as background in .logo-circle. And set the position of the image like this: background-position: center;
or:
Use a wrapper div for .logo-circle with the same size of the image and set overflow: hidden;. For .logo-circle set a very big shadow, like box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.2);

CSS/jQuery - Is it possible to create this shape (something like inverted circle)

I have no idea how would i make something like inverted circle in the corners. I have attached picture for better understanding.
Is this even possible to create using CSS3 or perhaps jQuery?

How i would recommend create that shape SVG.
Css solution:
Using a before and after elements that matches the background.
.shape {
position: relative;
width: 400px;
height: 120px;
background-color: cornflowerblue;
text-align: center;
color: white;
line-height: 120px;
}
/*replace with "" if your going to use the code*/
.shape:before {
content: "↙";
font-size: 2.5em;
text-indent: 35%;
line-height: 0%;
position: absolute;
top: calc(100% - 20px);
left: 0;
width: 35%;
height: 50%;
background-color: white;
border-top-right-radius: 15px;
}
.shape:after {
content: "↘";
line-height: 0%;
text-indent: -43%;
font-size: 2.5em;
position: absolute;
top: calc(100% - 20px);
right: 0;
width: 35%;
height: 50%;
background-color: white;
border-top-left-radius: 15px;
}
.shape .extra {
position: absolute;
top: 100%;
background-color: cornflowerblue;
width: 30%;
height: 30%;
left: 35%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
<div class="shape">This is not a problem any more
<div class="extra"></div>
</div>
SVG:
Using the path element and then using the Bezier Curves command.
MDN paths
<svg width="300px" viewbox="0 0 100 60">
<path fill="cornflowerBlue" d="m 0,0
100,0
0,30
-25,0
c-5,0 -5,0 -5,5
v20
c0,5 0,5 -5,5
h-30
c-5,0 -5,0 -5,-5
v-20
c 0,-5 0,-5 -5,-5
h-25z" />
</svg>

The codepen link here (http://codepen.io/techsev/pen/dtAfB/) will teach you how to useadditional divs and shape them to create inverted corners. There is no way currently to invert rounded corners without attaching additional frameworks to a style sheet.
#import "compass/css3";
body {
background-color: #fff;
}
.wrapper {
overflow:hidden;
width:200px;
height:200px;
}
div.inverted-corner {
box-sizing:border-box;
position: relative;
background-color: #3e2a4f;
height: 200px;
width: 200px;
border: solid grey 7px;
}
.top, .bottom {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.top:before, .top:after, .bottom:before, .bottom:after{
content:" ";
position:absolute;
width: 40px;
height: 40px;
background-color: #fff;
border: solid grey 7px;
border-radius: 20px;
}
.top:before {
top:-35px;
left:-35px;
}
.top:after {
top: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
.bottom:before {
bottom:-35px;
left:-35px;
}
.bottom:after {
bottom: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
<div class="wrapper">
<div class="inverted-corner">
<div class="top"> </div>
<h1>Hello, use mult. divs inside a div to do this</h1>
<div class="bottom"> </div>
</div>
</div>