I'd like to have tooltip text completely specified by CSS, and not in the dynamic-html portion of my application, so that styling and code can be completely separable (I'm taking the view that tooltip messages may be the concern of the UX department, or at least, a 3rd party user, and shouldn't have to hack around in the JavaScript-generating code to effect tooltip changes).
The following code isn't expected to completley work, but it doesn't work at all:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:after {
content: "foo bar";
}
.tooltip:hover .tooltip:after {
visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
</div>
</body>
</html>
In particular, though I've defined the after content, it isn't being displayed on hover:
.tooltip:after {
content: "foo bar";
}
.tooltip:hover .tooltip:after {
visibility: visible;
}
For reference, this was modified from the w3schools example
Not sure if this old answer is still applicable since it may predate pseudo elements: Tooltips, CSS only, Show text tooltip on mouseover using a class to define the text
there you go:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip:after {
content: "foo bar";
position: absolute;
top: -30px;
right: 0;
left: 0;
display: none;
text-align: center;
background-color: #000;
color: #fff;
border-radius: 4px;
padding: 2px;
}
.tooltip:hover:after {
display: block;
}
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me</div>
if you want to change the position / look of the tooltip itself, change the styling of this part: .tooltip:after {}
I believe your problem is this selector:
.tooltip:hover .tooltip:after
This CSS selector applies to an element with the class of 'tooltip' that is within a parent element that also has the class of 'tooltip'. You probably want:
.tooltip:hover::after
(Note that this won't work exactly with your example code because it applies style to .tooltip .tooltiptext, which also doesn't exist. You probably mean .tooltip::after here also.)
Here is a working version of the example in your question.
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip:after {
opacity: 0;
}
.tooltip:hover:after {
content: "foo bar";
opacity: 1;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 0 6px 6px 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
margin: 0.5rem 0 0 0.5rem;
z-index: 1;
}
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me</div>
Related
I am pretty new to css. I have defined a dot element with different collors.
/*Dots*/
.ccrdot {
display: inline-block;
position: absolute;
background-color: #8d8d8d;
border-radius: 50%;
opacity: 0.5;
width: 10px;
height: 10px;
pointer-events: none;
}
.ccrdot.red {
background-color: #FF0000;
}
.ccrdot.yellow {
background-color: #fffb09;
}
.ccrdot.green {
background-color: #67ff09;
}
But when i use this like:
> <span class="ccrdot"></span><span>Text Text Text</span>
<span class="ccrdot"></span> Text Text
or
<div class="ccrdot"></div> Text Text
The text slides under the dot element. I want to present them side by side. What did i do wrong?
Thank you.
position: absolute takes them out of the text flow, so there's no space reserved for them anymore, if you remove it they'll have their own space.
/*Dots*/
.ccrdot {
display: inline-block;
background-color: #8d8d8d;
border-radius: 50%;
opacity: 0.5;
width: 10px;
height: 10px;
pointer-events: none;
}
.ccrdot.red {
background-color: #FF0000;
}
.ccrdot.yellow {
background-color: #fffb09;
}
.ccrdot.green {
background-color: #67ff09;
}
I am trying to style the parent div when hover over a div but it doesn't seem to work.
Here is my work
.icon-grid:hover ~ .ab_section_element {
border: 2px solid black;
background-color: white;
}
<div data-v-714a5b85="" class="ab_section_element">
<span data-v-714a5b85="" class="icon icon-grid clickable">
Section (Left Text)
</span>
</div>
Is there anything I'm doing wrong?
You can't select the parent element, but you can "fake" the selection of the parent element with an absolutely positioned pseudo-element:
.ab_section_element {
position: relative;
}
.icon-grid:hover::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid black;
background-color: white;
z-index: -1;
}
/* just for demonstration */
body {
background: #ccc;
}
<div data-v-714a5b85="" class="ab_section_element">
<span data-v-714a5b85="" class="icon icon-grid clickable">
Section (Left Text)
</span>
</div>
However, this approach requires that the child element itself shouldn't be positioned (non-statically).
You cannot style a parent with hover, but you can do an adjacent.
.div1 {
width: 60px;
height: 60px;
background: red;
}
.div2 {
width: 60px;
height: 60px;
background: green;
}
.div1:hover~.div2 {
background: yellow;
}
<div class='div1'></div>
<div class='div2'></div>
This may solve your problem.
.ab_section_element .icon-grid:hover{
border: 2px solid black;
background-color: white;
}
I have a css tooltip which is triggered by hovering over a link, the tooltip text is then populated from the span element hidden in the link text.
fiddle https://jsfiddle.net/70wxxhne/
However I now need to have other html elements within the popup so ideally I would like to load the tooltip content from another div (note1 in the fiddle), is this possible with css alone?
<--css-->
.ktooltip {
position: relative;
display: inline-block;
}
.ktooltip .ktooltiptext {
visibility: hidden;
background: #fff;
width: 150px;
text-align: center;
border-radius: 6px;
padding: 5px 5px;
top: -5px;
left: 105%;
border:2px solid grey;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.ktooltip:hover .ktooltiptext {
visibility: visible;
}
<p>Here is some text with a note here
<sup class="ref">
<a href="#note1" id="note1" class="ktooltip">Tooltip
<span class="ktooltiptext">Current Tooltip text</span>
</a>
</sup>
that continues on here too.
</p>
<div id="note1" class="ktooltip2"><p>wannabe <b>tooltip</b> with alink</p></div>
As of HTML5, you can use block elements, i.e. div, inside an anchor, so no worries about not getting that validated properly anymore, so simply replace your span with your div.
If your div contains a link/anchor, you need to wrap them both (nested links is not valid) and make the div a sibling, here done with the existing ref
Note, to also be able to actually click on the link in the tooltip, I changed its left position to 99%, so it does not disappear when hovering the tooltip itself.
.ref {
position: relative;
}
.ktooltip {
display: inline-block;
}
.ref .ktooltip2 {
visibility: hidden;
background: #fff;
width: 150px;
text-align: center;
border-radius: 6px;
padding: 5px 5px;
top: -5px;
left: 99%;
border: 2px solid grey;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.ref:hover .ktooltip2 {
visibility: visible;
}
<div>Here is some text with a note here
<sup class="ref">
Tooltip
<div id="note1" class="ktooltip2">
<p>wannabe <b>tooltip</b> with alink</p>
</div>
</sup> that continues on here too.
</div>
I want to create title that have an horizontal line going through them with the Title text appearing above the line, even though I believe I have correctly used the z-index rule it still does not work, this is the css I am using;
.heading {
border-bottom: 2px solid #222222!important;
text-align: center;
z-index: -1;
}
#sidebar .widget h3, #sidebar .widget .heading h3 {
color: #333333;
text-align: center;
z-index: 10;
margin-bottom: -8px;
position: relative;
}
The url is: http://crossfitblackboard.com/
z-index
works only if you are using a position
so you need also set the .heading to position: relative
Create a duplicate of the heading and line-through it.
HTML:
<h1 class="shadow">Your Awesome Heading</h1>
<h1>Your Awesome Heading</h1>
CSS:
h1{
position: absolute;
}
.shadow{
color: lightgrey;
text-decoration: line-through;
}
Here's the Fiddle: http://jsfiddle.net/39rwmjt6/1/
Let's keep the markup as simple as possible; We can do this with one element for your heading and the pseudo element :before with z-index: -1;.
Have an example!
HTML
<h1>Heading</h1>
CSS
h1 {
position: relative;
text-align: center;
font-size: 1em;
}
h1:before {
position: absolute;
content: '';
height: 2px;
background: #F00;
display: block;
width: 100%;
top: 0.6em;
z-index: -1;
}
how is it possible to do that, compatible, good looking and responsive ? I think to make the H2 box with a background, but it make a lot of problem interacting with the background... it's a lot of png. I prefer a way to do it with pure css, padding, margin etc
full resolution image (too see texture)
This can be done with any semantically appropriate element of your choice, without having to set a background color.
http://cssdeck.com/labs/n2z0icvf
<h1>Technique</h1>
h1 {
overflow: hidden;
padding-left: 2em;
}
h1:before,
h1:after {
content: " ";
display: inline-block;
border-bottom: 2px solid;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
width: 100%;
}
Working fiddle: http://jsfiddle.net/58JCY/
HTML:
<fieldset>
<legend>LEVE TECHNIQUE</legend>
</fieldset>
CSS:
fieldset {
border:none;
border-top: 1px solid #999;
}
legend {
padding: 0 5px;
}