Link:
http://jsbin.com/EFAlace/3/edit?html,css,output
HTML:
<a href='#' class='tooltip-parent'>Hover over me!
<span class='tooltip-container'>
<span class='tooltip'>
<a style='href='#'>Weird link</a><br>
One<br>
Two<br>
Three<br>
Four<br>
</span>
</span>
</a>
.tooltip-container added for absolute positioning, for 'reset' tooltip position.
CSS (LESS):
.tooltip-container {
position: absolute;
}
a:hover {
background-color: grey;
}
.tooltip-parent {
display: inline-block;
.tooltip {
width: 150px;
display: none;
position:relative;
border:1px solid blue;
&:before, &:after {
content: '';
top: -20px;
left: 20%;
position: absolute;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
margin-left: -20px;
}
&:before {
border-left: 23px solid transparent;
border-right: 23px solid transparent;
border-bottom: 23px solid;
margin-left: -23px;
border-bottom-color: inherit; /* Can't be included in the shorthand to work */
top: -23px;
}
}
&:hover .tooltip {
padding: 10px;
display: inline-block;
top: 20px;
}
}
ul {
list-style:none;
margin: 0; padding:0;
li {margin: 0; padding:0;}
}
:before and :after: things are for triangle at the top of the tooltip. Google on 'CSS triangle pseudo elements'
I have been experimenting with CSS-only tooltip, which pops out on hover over a parent element. You can see working example at jsBin. But I encountered the strange issue - when I add anchor inside tooltip - html markup blows out, just uncomment this code <!--<a style='href='#'>Weird link</a><br>--> in HTML pane and you will see what Im talking about. And then see at markup structure - browser just places HTML content of .tooltip outside of and element to which that tooltip is attached.
Thats pretty unclear behavior, any thoughts will be appreciated.
first i see a problem of anchor inside anchor, that's not allowed by html. try to rearrange your html tags in a better way.
secondly about the weird link, which is:
<a style='href='#'>Weird link</a>
why is it
style='href='#'
Related
I have following html
<div class="popover"> click to popoverpopover</div>
When user mouse hover on div there should be a popover
My css is following
.popover:hover
{
content:"popover";
.popover:before
{
content:'';
position: absolute;
display: block;
position: absolute;
left: 15px;
width: 0;
height: 0;
border: 7px outset transparent;
bottom: -14px;
border-top: 7px solid #555;
}
}
But I just found out that in CSS I can't use class within another class.
Is there a way to achieve what I am trying.
You could use a data-* attribute to hold rollover text.
<div class="wrap">
<span data-rollover="Tool tip">Check</span>
</div>
span:hover {
font-size: 0;
}
span:hover:before {
font-size: 16px;
content: attr(data-rollover);
}
Fiddle:
http://jsfiddle.net/cgm3c2us/
General idea taken from:
http://dabblet.com/gist/4286801
I got a menu and the <li> element has something like a border at right.
The problem about this is when it breaks for a second line of <li> elements. I know that i can take last-child border out, but is there a way to know when it breaks a line?
*Only with CSS and automatic, i cant use nth-child(), since i will not have the control over the categories.
Example:
http://jsfiddle.net/m5cy969s/ - I would like to take out the border from the third <li>.
HTML
<ul>
<li>Primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
</ul>
ul,li { padding:0; margin: 0; }
CSS
li {
display: inline-block;
list-style: none;
padding: 3px 6px;
position: relative;
}
li:after {
position: absolute;
content: "";
right: -2px;
top: 0;
border-left: 2px solid blue;
border-right: 2px solid green;
height: 100%;
}
ul {
max-width: 220px;
border: 1px solid red;
background-color:pink;
}
The only way to do this with pure CSS would be to manually select the child <li> that breaks at the end and remove the border. In your case, this would be the third child.
li:nth-child(3):after {
border: none
}
To do this "automatically", you would need JS.
I am trying to create a css tool-tip, the html and css code and also link to fiddle is given below
CHECK MY CODE HERE #JSFIDDLE
HTML
<a class="tooltip" href="#">CSS Tooltips 1
<span>Tooltip1</span></a>
</br>
<a class="tooltip" href="#">CSS Tooltips
<span>Tooltip This is not working for me </span></a>
CSS
.tooltip {
position: relative;
}
.tooltip span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
.tooltip span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #000000;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.tooltip:hover span {
display: block;
opacity: 0.8;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
My issue is only half the text from <span>Tooltip This is not working for me </span> is shown in the corresponding tool-tip. I tried hard but couldn't debug it. Please help.
Thanking You
It's because you have a fixed width. To allow the tooltip to dynamically expand to the content's width remove the width property and set white-space:nowrap to keep the text inline.
.tooltip span {
position: absolute;
color: #FFFFFF;
background: #000000;
white-space: nowrap;
height: 30px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
http://jsfiddle.net/89rwu2db/3/
EDIT
As commented bellow, if you want to keep the fixed width, but wants the text to expand in height, remove the height property of the span, and it will grow (also, don't use white-space anymore):
.tooltip span {
position: absolute;
color: #FFFFFF;
background: #000000;
width:140px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
http://jsfiddle.net/89rwu2db/9/
The point is, setting a specific width or height prevents your element of growing automatically.
You need to change the width property of the second tooltip to fit all the text you want display.
Fixed Fiddle: http://jsfiddle.net/89rwu2db/8/
I added styling to the second span to increase the width.
<span style="width: 250px;">Tooltip This is not working for me </span>
I'm stuck with the following code:
<h1>
Registrer faktura
<span class="helpToggle" style="cursor:pointer;" title="Vis hjelpetekst"> Hjelp</span>
</h1>
//CSS
h1 .helpToggle {
display: inline-block;
width: 40px;
text-indent: 20px;
border: solid 1px red;
overflow: hidden;
}
h1 .helpToggle:after {
content: '?';
display: inline-block;
height: 32px;
width: 32px;
border: solid 1px green;
}
I'm not happy about having a <span> tag inside the H1 tag, but according to HTML5, this is now ok - and I'm not able to edit the HTML code (just the styling).
My goal is to replace the help text inside the span tag with a question mark. But for some reason the ? is placed inside the span.
I can't figure out why this is happening and I was hoping some one else can see what is happening.
See my fiddle here.
You could use visibility in combination with ::before pseudo-element instead of ::after.
Demo: http://jsfiddle.net/abhitalks/E98SE/9/
CSS:
h1 .helpToggle {
border: solid 1px red;
position: absolute;
visibility: hidden;
}
h1 .helpToggle::before {
content:'?';
visibility: visible;
border: solid 1px green;
}
The visibility: hidden; will leave the space occupied by the element as-is, hence we use the ::before pseudo-element to ensure that the ? is displayed before the occupied space. Making it absolutely positioned will take it out of the flow.
You want to replace the word Help with a question mark? Then :after actually is not the thing, it will place the question mark AFTER the element.
BUT you can hide the span and make the :after Element visible:
h1 .helpToggle {
visibility: hidden;
text-indent: 20px;
border: solid 1px red;
overflow: hidden;
font-size: 0px;
}
h1 .helpToggle:after {
visibility: visible;
content: '?';
border: solid 1px green;
font-size: 24pt;
}
Live demo: http://jsfiddle.net/w5B4Z/
Can you make round cap underlines (as in the above image) with CSS? How?
Is there a way to do this with border-bottom? border-radius produces this stylish effect instead:
EDIT: I missunderstood what hpique wated, but this should work:
#test {
font-size: 50px;
background: transparent;
border-radius: 10px;
height: 10px;
width: 255px;
box-shadow: 0 55px 0 0 #000;
font-family: sans-serif;
}
<div id="test">Hello world</div>
Basically I'm putting the text on a div, and the box shadow will be of the same size as the set height and width for that div, just play with the height/width and you should get what you want...
JSBin Demo
Screenshot from the Demo:
Yes, it’s possible. Add a block element using :after with no content and give it desired width/height like so:
h1:after {
content:"";
float:left;
background:green;
width:100%;
height:6px;
border-radius: 3px;
}
Fiddle here: https://jsfiddle.net/toqL0agq/1/
I tried doing this same thing with the accepted answer, but found I was still getting the undesired result shown in the question. You can achieve this with a psuedo class:
HTML:
<span class="kicker">Hello World</span>
CSS:
.kicker {
font-size: 1rem;
position: relative;
&:after {
content: '';
display: block;
width: 100%;
height: 6px;
border-radius: 6px;
background: #000;
position: absolute;
bottom: 0;
left: 0;
}
}
One of the tricks i just learned is instead of working with div borders try adding an :after selector to the heading like :
h1:after{
content: " ";
display: block;
width: 1.5em;
height: .2em;
background-color: #f0860c;
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>test</h1>
</body>
</html>
No. If you want to do this purely with HTML+CSS you would need a secondary element to sit beneath the text, and then apply curvature and background colour to that. Alternatively, and cringe-worthy, in my opinion, you could use an image.
Like youtag's answer, my solution uses pseudo-elements—but my underline only runs the length of the text and can wrap onto multiple lines (with an underline running beneath each line of text).
Basically, I manually cap the ends of the element's border with pseudo-element circles before and after the element:
h1 a {
text-decoration: none;
position: relative;
border-bottom: 15px solid;
padding-bottom:3px;
}
h1 a:hover, h1 a:focus {
border-bottom: 15px solid #eb6d32;
}
h1 a:before, h1 a:after {
content: '';
height: 15px;
width: 15px;
background-color: currentColor;
border-radius: 15px;
position: relative;
display: inline-block;
vertical-align: text-bottom;
margin-bottom: -18px;
}
h1 a:before {
left: .2ex;
margin-left: -.4ex;
}
h1 a:after {
margin-right: -.4ex;
right: .2ex;
}
I use left and right on the pseudo-elements so the ends don't stick out too far past the text.
See my codepen.
you can do that by using a div beneath the text and setting its border-radius to 2000px. i think that will be simpler
HTML:
<div class="wrapper">
<span>Hell World</span>
<div class="underline"></div>
</div>
CSS:
.underline{
height:0px;border: 3px solid black;
border-radius: 2000px;
}
.wrapper{
display:inline-block;
}
JQUERY SNIPPET:
var arbitrarynumber = 5
$('.underline').width($('.underline').parent().width()-arbitrarynumber)