i have this css tootlip code:
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
I want it to auto resize based on the text lenght. (long or short)..how i can do it? Thank you.
Get rid of; width:140px; from the class a.tooltips span
Related
I want to make a speech bubble shape identical to the image.
What part of the CSS shown below can be modified to make it look like the picture?
Can you help me to get the look I want?
.body{
background : linear-gradient(to bottom, #fff,red)
}
.chat {
position: relative;
width: 270px;
padding: 10px;
margin: 1em auto 50px;
text-align: center;
color: black;
background: #fff;
border: 1px solid gray;
border-radius: 30px;
}
.chat:before {
content: "";
position: absolute;
z-index: 2;
top: -2px;
left: -7px;
height: 20px;
border-left: 20px solid #E5E5EA;
border-bottom-right-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
.chat:after {
content: "";
position: absolute;
z-index: 3;
top: -2px;
left: 4px;
width: 26px;
height: 20px;
background: white;
border-bottom-right-radius: 10px;
-webkit-transform: translate(-30px, -2px);
}
<div class="chat"></div>
We can't bring exactly as it is. I have tried to bring it near the shape.
.chat {
position:relative;
width:270px;
padding:10px;
height:50px;
margin:1em auto 50px;
text-align:center;
color:black;
background:#e5e5ea;
//border: 1px solid gray;
border-radius: 30px;
}
/* creates part of the curve */
.chat:before {
content: "";
position: absolute;
z-index: 2;
top: 7px;
left: -8px;
height: 20px;
border-left: 20px solid #E5E5EA;
border-bottom-right-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
/* creates part of the curved pointy bit */
.chat:after {
content: "";
position: absolute;
z-index: 3;
top: 7px;
left: 4px;
width: 26px;
height: 20px;
background: white;
border-top-right-radius: 14px;
-webkit-transform: translate(-30px, -2px);
}
<div class="chat">
</div>
Here's a example based on Pure CSS speech bubbles by Nicolas Gallagher.
It uses overlapping pseudo-elements with border-radius to create the bubble's pointy curved stem. This may not be a pixel-perfect match to your mockup, but you can modify the values to improve the shape as desired.
body {
background: lightgray;
margin: 0;
}
.speech-bubble {
position: relative;
padding: 50px;
margin: 1em 20px;
text-align: center;
color: black;
background: white;
border-radius: 30px;
}
.speech-bubble:before {
content: "";
position: absolute;
z-index:-1;
left: -22px;
top: 0;
width: 40px;
border-bottom: 35px solid white;
border-top-right-radius: 25px;
}
.speech-bubble:after {
content: "";
position: absolute;
z-index:-1;
left: -28px;
top: -3px;
height: 38px;
width: 28px;
background: lightgray;
border-top-right-radius: 20px;
}
<div class="speech-bubble">Hello, world.</div>
This demo might help visualize how the stem is created:
body {
background: lightgray;
margin: 0;
}
.speech-bubble {
position: relative;
padding: 50px;
margin: 1em 20px;
text-align: center;
color: black;
background: white;
border-radius: 30px;
}
.speech-bubble:before {
content: "";
position: absolute;
z-index: -1;
left: -22px;
top: 0;
width: 40px;
border-bottom: 35px solid green;
border-top-right-radius: 25px;
}
.speech-bubble:after {
content: "";
position: absolute;
z-index: -1;
left: -28px;
top: -3px;
height: 38px;
width: 28px;
background: red;
border-top-right-radius: 20px;
}
<div class="speech-bubble">Hello, world.</div>
Also see:
How to create a curved speech bubble?
Speech bubble with arrow
I need to make this exact div with right arrow. As you can see it's little bit curved
Here's what I got. I want to make it a little bit longer and curved as in picture above
.speech-bubble {
display:inline-block;
padding:5px;
position: relative;
background: #dcf8c6;
border-radius: .4em;
}
.speech-bubble:after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 0;
height: 0;
border: 5px solid transparent;
border-left-color: #dcf8c6;
border-right: 0;
margin-top: -5px;
margin-right: -5px;
}
<div class="speech-bubble"> Hello Mike! Could you please call me back </div>
.speech-bubble {
display: inline-block;
position: relative;
}
.speech-bubble > span {
background: #dcf8c6;
border-radius: 0.4em;
display: inline-block;
padding: 10px;
z-index: 1;
}
.speech-bubble::after {
background-color: #ffffff;
border-radius: 0 0 50% 0;
border-right: 0;
bottom: 14px;
content: '';
height: 30px;
margin-top: -5px;
margin-right: -5px;
position: absolute;
right: -21px;
transform: rotate(10deg);
width: 30px;
z-index: -1;
}
.speech-bubble::before {
background-color: #dcf8c6;
border-radius: 50%;
border-right: 0;
bottom: 7px;
content: '';
height: 30px;
margin-top: -5px;
margin-right: -5px;
position: absolute;
right: -11px;
transform: rotate(20deg);
width: 30px;
z-index: -1;
}
<div class="speech-bubble">
<span>Hello Mike! Could you please call me back</span>
</div>
Here's the bubble's code
.speech-bubble {
display: inline-block;
padding: .5em 2em 2em 2em;
position: relative;
background: #dcf8c6;
border-radius: .4em;
font-family: 'Arial', sans-serif;
color: #888;
box-shadow: 2px 2px 1px rgba(0,0,0,0.2);
}
About the right arrow, what about using a background-image (png). If you want that shape you need to use border-radius. Using a .png image is way easier.
By the way, I wouldn't use a unique div to be a container and a text-wrapper...
I tried to add an arrow shape to a div. i managed to add it to the end of the div but i am struggling to figure out how to add it to the front as well without using a new class. Is it possible to achieve it with only one class?
edit: my answer to the question with a different shape approach,
i think they are all 3 very useful:
.arrow {
margin-left: 100px;
position: relative;
background: pink;
width: 400px;
height: 100px;
text-align:center;
line-height:100px;
margin-bottom:10px;
}
.arrow:after {
border: solid transparent;
content: " ";
position: absolute;
border-bottom-color: white;
border-width: 50px;
left: 0;
top: 0;
transform: rotate(90deg);
}
.arrow:before {
border: solid transparent;
content: " ";
position: absolute;
border-bottom-color: pink;
border-width: 50px;
left: 400px;
top: 0;
transform: rotate(90deg);
}
<div class="arrow">
1
</div>
<div class="arrow">
2
</div>
You will need an inner element. What that element is, is purely up to you. Here I've used a <span> to make the left arrow appear.
.arrow {
float: left;
width: 128px;
height: 50px;
background-color: white;
border: 1px solid green;
position: relative;
margin-right: 40px;
text-align: center;
border-left: none;
}
.arrow:after,.arrow span:after {
content: '';
position: absolute;
top: 0px;
left: 128px;
width: 0;
height: 0;
border: 25px solid transparent;
border-left: 12px solid white;
z-index: 2;
}
.arrow:before,.arrow span:before {
content: '';
position: absolute;
top: 0px;
left: 129px;
width: 0;
height: 0;
border: 25px solid transparent;
border-left: 12px solid green;
z-index: 1;
}
.arrow span:after {
left: 0;
}
.arrow span:before {
left: 1px;
}
<div class="arrow"><span></span>1</div>
<div class="arrow"><span></span>2</div>
<div class="arrow"><span></span>3</div>
<div class="arrow"><span></span>4</div>
<div class="arrow"><span></span>5</div>
I have modified chevron shape, from this page: https://css-tricks.com/examples/ShapesOfCSS/ (borrowed idea, credits to mr Anthony Ticknor:))
.chevron {
position: relative;
text-align: center;
height: 60px;
width: 260px;
line-height:60px;
margin-bottom:10px;
}
.chevron:before {
content: '';
position: absolute;
top: 0;
left: 3%;
height: 50%;
width: 100%;
transform: skew(25deg, 0deg);
border:1px solid red;
border-bottom:none;
}
.chevron:after {
content: '';
position: absolute;
top: 50%;
left: 3%;
height: 50%;
width: 100%;
transform: skew(-25deg, 0deg);
border:1px solid red;
border-top:none;
}
<div class="chevron">1</div>
<div class="chevron">2</div>
So, one div, and two pseudo-elements, properly scewed, with borders hidden, where needed.
This question already has answers here:
Speech bubble with arrow
(3 answers)
Closed 7 years ago.
I've to create something you see in attached image
right now i am using this as background image
background-image: url("corner.png");
background-size: cover;
and then added text but i know there does exist a css solution for creating this border for this so if someone please help me with this i tried to find but i did not find proper solution
You can also generate it from the below link and use it.
http://apps.eky.hk/css-triangle-generator/
.arrow {
width: 250px;
height: 60px;
position: relative;
background: #333;
}
.arrow:after {
content: '';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #333;
position: absolute;
bottom: -15px;
left:25px;
}
<div class="arrow"></div>
Check this fiddle Hope you refer something like this.
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
.arrow-down {
width: 200px;
height: 50px;
position: relative;
background: red;
}
.arrow-down:after {
content: '';
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
position: absolute;
bottom: -19px;
}
<div class='arrow-down'>fgdfgdfgfd</div>
This will help you.
it will create arrows using css.
https://css-tricks.com/snippets/css/css-triangle/
Hi i have a circular div and i want some text to show up on hover and disappear on mouse out using only css
for example if have a circular div , i want the tag say home to appear on its right side on hover and disappear on mouse out
my code for the buttons is-
.cbp-fbscroller > nav a {
display: block;
position: relative;
z-index: 9999;
color: transparent;
width: 26px;
height: 26px;
outline: none;
margin: 25px 0;
border-radius: 50%;
border: 4px solid #fff;
}
.no-touch .cbp-fbscroller > nav a:hover {
background: rgba(255,255,255,0.4);
}
.cbp-fbscroller > nav a.cbp-fbcurrent {
background: #fff;
}
you can use this code.....
.circle {
width: 150px;
height: 150px;
border: 5px solid whitesmoke;
border-radius: 50%;
position: relative;
background:url('http://download.jqueryui.com/themeroller/images/ui- bg_flat_100_555_40x100.png');
}
.circle:before {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: whitesmoke;
border-radius: 50%;
content:"";
display: block;
}
.circle:hover span {
display:inline;
width: 0;
height: 0;
position: absolute;
top: 50%;
left:100%;
margin: -5px 0px -5px -25%;
padding: 5px 0px 5px 25%;
}
span
{
display:none;
}
For Demo:JSFIDDLE