I have a tooltip made with position: absolute and pseudo elements. The problem is that when the element associated with the tooltip is too close to the side - the tooltip partly gets out of the screen and is unreadable. Is there a way I can calculate/prevent the tooltip going out of the screen?
http://jsfiddle.net/o9s4dy0t/25/
This is the CSS code:
.tooltip {
display: inline;
position: relative;
}
.tooltip:after {
background: #111;
background: rgba(0,0,0,.8);
border-radius: .5em;
bottom: 1.35em;
color: #fff;
content: attr(title);
display: table;
padding: .3em 1em;
position: absolute;
text-shadow: 0 1px 0 #000;
max-width:200px;
right:60px;
z-index: 98;
}
.tooltip:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0,0,0,.8) transparent;
border-width: .4em .4em 0 .4em;
bottom: 1em;
content: "";
display: block;
left: 0;
position: absolute;
z-index: 99;
}
It's fine if the arrow is off - I might remove it in the future.
This needs calculation to be done. Using plain CSS I don't think it will be possible. However, there are various libraries already doing so. One of the many is:
https://getbootstrap.com/docs/4.1/components/popovers/
You may use this in your code and make it work.
Related
I'm requesting your help with a .css hr class
I'm trying to figure out how to make a double border like this:
Here's what i did:
hr.style15 {
border-top: 4px double black;
}
hr.style15:after {
content: 'SHIPPING INFO';
display: inline-block;
position: relative;
top: -15px;
left: 40px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
}
My questions are:
1) How do I get rid of the inline-block below the 2 lines? I've tried by deleting the inline-block sentence but it doesn't work.
2) Can I add font-family and font size to this?
3) Is it possible to increase the space between the 2 lines without increasing the width?
Basically I believe I'd do it differently. Using both :after and :before for the lines will help you drastically on putting a text on top of it.
So I prepared this CodePen for you. Basically what I did was using an :after and a :before (as I told you before) for the border-lines and after that I added a span with a background-color (in this case white) on top of the border-lines (look at the z-index).
.container {
width: 800px;
position: relative;
}
.double-bar {
&:after {
content: "";
border-bottom: 1px solid black;
width: 100%;
position: absolute;
top: 9px;
left: 0;
z-index: 1;
}
&:before {
content: "";
border-bottom: 1px solid black;
width: 100%;
position: absolute;
top: 13px;
left: 0;
z-index: 1;
}
span {
z-index: 2;
position: relative;
background-color: white;
left: 40px;
padding: 0 7.5px;
text-transform: uppercase;
font-weight: 600;
font-size: 20px;
}
}
You can see a demo of this.
I hope this helps!
Please have a check with this:-
HTML
<h1 class="title"><span>Shipping info</span></h1>
CSS
h1.title {
margin-top: 0;
position: relative;
}
h1.title:before {
content: "";
display: block;
border-top: solid 1px black;
width: 100%;
height: 2px;
position: absolute;
top: 50%;
z-index: 1;
border-bottom: 1px solid #000;
}
h1.title span {
background: #fff;
padding: 0 20px;
position: relative;
z-index: 5;
margin-left: 50px;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I have a jsfiddle here - http://jsfiddle.net/0nvns9Lj/1/
I've done what I need to do but don't know if it's the best way - I'm sure it should be easier.
I just need to create a play button so I have a circle containing a triangle.
It's working but seems like alot of messing for something simple
.wrap{
background: #ddd;
height: 300px;
position: relative;
}
.circle{
background: red;
border-radius: 50px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
width: 50px;
margin: -25px 0 0 -25px;
}
.circle_inner{
position: relative;
height: 100%;
}
.circle_inner:before{
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #ffffff;
position: absolute;
top: 50%;
left: 50%;
margin: -10px 0 0 -7px;
}
You can (and should) do this simpler.
* { margin:0; padding:0 }
figure {
background: #ddd;
height: 200px;
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
figure button[name="play"] {
width: 50px;
height: 50px;
background: red;
border: none;
border-radius: 100%;
margin: auto;
cursor: pointer;
}
figure button[name="play"]:focus {
outline: 0;
border: 1px solid hsl(210, 58%, 69%);
box-shadow: 0 0 0 3px hsla(210, 76%, 57%, 0.5);
}
figure button[name="play"]::after {
content: '';
display: inline-block;
position: relative;
top: 1px;
left: 3px;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent white;
}
<figure>
<button name="play"></button>
</figure>
Editable demo: http://jsbin.com/mipali/5
There is not much to improve.
Maybe you can use a special font like 'Webdings', and otherwise you can make a simple CSS triangle. In both cases you just need a simple element for the button, and a ::before pseudo-element for the shape. In the HTML and CSS below, both methods are shown.
Both buttons use a normal A element, so the buttons could (if you can find any url or useful onclick event to attach to it) still work as a normal link when you don't even have CSS (think about the visually impaired).
Moreover, the HTML doesn't contain any extra markup apart from the class names. No 'inner' element needed, and I think that's the most important improvement. The CSS isn't that much shorter than your's but I got rid of the 'inner' element, so the markup is completely clean.
And remember: if you want more complex shapes, you also have a ::after pseudo-element at your disposal. :)
/* Basic red round button properties */
.button {
display: inline-block;
position: relative;
width: 40px;
height: 40px;
border-radius: 20px;
background-color: red;
color: white;
/* Hide the text 'play', which is present in the HTML document for accessibility */
font-size: 0;
}
/* Properties for the pseudo-element that almost every button will need.
You can just merge it into the style below if you are only going to have
the play button. */
.button::before {
content: "";
display: block;
position: absolute;
}
/* Play button properties using font */
.play1.button::before {
font-family: 'Webdings';
font-size: 28px;
content: '\25B6';
top: -2px;
left: 12px;
}
/* Play button properties using CSS shape */
.play2.button::before {
width: 0;
height: 0;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-left: 15px solid white;
top: 10px;
left: 16px;
}
Play<br>
Play
I need help turning the arrow white with a blue border like the box containing the text. I need to use the title inside an a tag as the content but feel free to edit everything else I managed to get it to a certain point but cant seem to get past this:
CSS
.toop {
position: relative;
padding: 0 5px;
line-height: 23px;
}
.toop:hover:after {
content: attr(title);
color: #474747;
font-size: 14px;
line-height: 150%;
text-align: left;
background-color: #ffffff;
border-radius: 5px;
border: 2px solid #2192ce;
padding: 5px 10px;
opacity: 0.9;
display: block;
width: 180px;
position: absolute;
left: 10px;
bottom: 40px;
z-index: 98;
}
.toop:hover:before {
content: "";
border: solid;
border-color: #2191ce transparent;
border-width: 10px 10px 0 10px;
opacity: 0.9;
display: block;
left: 30px;
bottom: 30px;
position: absolute;
z-index: 99;
}
HTML
<br>
<br>
<br>
<br>
<br>
Tooltip is here
you can not do that , you can not have a border around the "arrow" . making that arrow is a trick you can do with css to manipulate the :after and :before to make it appear like an arrow , but you can not have a border outside of that unless you wanted to use an image and put it in that place.
see an example I made of your code to show
outline: 2px solid #000;
outline can be used to make a border outside of the actual border, but it is not going to be anything like what you wanted.
http://jsfiddle.net/pp9t0vqb/4/
The best you can do is fake the arrow with an entire block:
.toop:hover:before {
content: "";
width:10px;
height:10px;
background:white;
border: 2px solid #2192ce;
border-width:0 2px 2px 0;
transform:rotate(45deg);
display: block;
left: 30px;
bottom:35px;
position: absolute;
z-index: 99;
}
But in this case you can't handle the opacity property.
Check this Demo Fiddle
I have the following icon , which is used mainly on most of my asp.net mvc web pages:-
<i class=" icon icon-blue icon-star-on "></i>
The related CSS classes for this icon is :-
.active .icon32.icon-star-on,.icon32.icon-star-on,.icon32.icon-star-on:hover {background-position : -448px -96px ;}
.icon.icon-blue,.icons-blue .icon {background-image : url('../img/opa-icons-blue16.png') ;}
But I need to add a tootip for the icon, so that when a use move the mouse over the icon to show a tooltip. So is there a way to define the tooltip inside my CSS , so that I do not have to add the tooltip manually on each screen?
Thanks
Yes, by using :after:
.icon:hover:after {
content: "Your tooltip";
display: block;
position: relative;
top: -16px;
right: -16px;
width: 100px;
background: lightblue;
}
Also check the demo.
Please note that all .icon classes get the same tooltip. This is pure CSS solution. If you want them to be different for each icon, you could use different classes, or use jQuery.
Add an attribute with the text for the element and use it for hovering.
I have showed using an anchor tag.
html
Hover here
css
.tooltip{
display:inline;
position:relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
'http://jsfiddle.net/Kxnqx/'
Add this code to your css:
.tooltip {
display: inline;
position: relative;
}
.tooltip:hover {
text-decoration: none;
}
.tooltip:hover:after{
background: #111;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 18px;
color: #fff;
content: attr(title);
display: block;
left: 50%;
padding: 5px 15px;
position: absolute;
white-space: nowrap;
z-index: 98;
}
.tooltip:hover:before{
border: solid;
border-color: #111 transparent;
border-width: 6px 6px 0 6px;
bottom: 12px;
content: "";
display: block;
left: 75%;
position: absolute;
z-index: 99;
}
Add a a title to your icon title="Tooltip text" and add the class of tooltip to the icon.
Source: http://forrst.com/posts/Simple_pure_CSS_tooltip_with_arrow-BkY
I would like to reproduce the following logo, add a shadow below one letter as in the using only CSS.
How to do it as box-shadow overflow on both side of the letter ? I would prefer to avoid having an extra <span class="shadow"></span> following my "hovering" letter but manage it only with the letter tag/CSS rule (see HTML below).
N.B.: I'm aware of jQuery / CSS3 Animated shadow effect.
HTML
<span>Pr<span class="text-info">o</span>be</span>
CSS
element.style {
box-shadow: 0 4px 3px #AAAAAA;
position: relative;
top: -3px;
}
Using pseudo-elements (:before and :after), :hover and opacity properties, the solution looks like the following (it can be extended w/animation effects on opacity)
HTML
<div class="text-effects"><span>Pr<span class="text-info">o</span>be</span></div>
CSS
body {
font-size: 10em;
font-family: Arial;
}
div.text-effects {
text-transform:uppercase;
}
span.text-info {
position: relative;
cursor:pointer;
}
.text-info:hover {
color: #008080;
bottom: 0.1em;
}
span.text-info:before {
content: ".";
color: transparent;
position: absolute;
width: 40%;
box-shadow: 0 5px 4px -4px #303030;
display: block;
left: 30%;
bottom: 1em;
opacity:0;
}
span.text-info:after {
content: ".";
color: transparent;
position: absolute;
bottom: 0;
width: 40%;
box-shadow: 0 5px 4px -4px #303030;
display: block;
left: 30%;
bottom:0.15em;
opacity:0;
}
span.text-info:hover:before{
opacity:1;
}
span.text-info:hover:after{
opacity:1;
}
Technique
I had to use pseudo-element as described by #Alex Bell.
But instead of box-shadow I use text-shadow and tweak the pseudo-element position.
pseudo-element text is ˍ aka U+02CD MODIFIER LETTER LOW MACRON (ˍ or \u02CD)
Final result is available as a fiddle.
HTML
<div class="text-effects">
<span>Pr<span class="text-info">o</span>be</span>
</div>
CSS
body {
font-size: 10em;
font-family: Arial;
}
div.text-effects {
text-transform:uppercase;
}
span.text-info {
position: relative;
color: #008080;
bottom: 0.1em;
width: 1em;
height: 1em;
}
span.text-info:after {
bottom: 0.15em;
color: transparent;
content: "ˍ";
display: block;
font-size: 120px !important;
height: 1em;
left: 26%;
position: absolute;
text-shadow: 0 0 11px #999;
width: 1em;
}