I am trying to show a tool tip box on hover an image. I won't be able to use jquery or any other plugin. I have to use pure css. I have seen a demo working here.
http://netdna.webdesignerdepot.com/uploads7/how-to-create-a-simple-css3-tooltip/tooltip_demo.html
My code:
<a class="tooltip" title="This is some information for our tooltip." href="#"><img id="graph_one" alt="" src="https://www.onlandscape.co.uk/wp-content/uploads/2013/09/Doug-Chinnery-ICM-Images-4-45x45.jpg" class="graph one"> </a>
Jsfiddle :
http://jsfiddle.net/txeF2/
For some reason I can't get the tooltip box.
UPDATED : http://jsfiddle.net/Md5E6/4/
Here is one solution: EXAMPLE HERE
Change .tooltip from inline to inline-block:
.tooltip {
display: inline-block;
position: relative;
}
Then remove the absolute positioning from the child img element. This was causing the main problem; as the element was removed from the flow of the document, thus causing the parent element to have no dimensions and collapse upon itself.
use like this to show tooltip
<a title="Create Simple Tooltip Using CSS3" class="tooltip">Some Sample CSS3 Tooltip</a>
.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;
}
If you want to view complete code with demo here is a full tutorial Create CSS3 Tooltip
For me the reason was my parent div had an attribute "pointer-events: none". Removing this fixed my tooltip not showing issue for the child div.
Related
I have come across a fragment of CSS that works. I would like to understand why it works for my own edification. My question is a general one on the sematics of using :after in CSS.
The Wordpress Twenty Nineteen theme puts a dark filter on feature images in order to make the (white) header text more readable.
I was searching for a way to remove the dark filter on specific feature images.
I found a post that suggests this css:
.site-header.featured-image:after {
background: none;
}
It works a treat!
Using Firefox inspector I see that .site-header & .featured-image are both classes of an enclosing <header> element. Layout is flex.
I'm trying to get my head round this usage of :after. My search of :after suggests that is a way of adding 'content' after an element. This example add no content.. instead it seems to be modifying/overriding an existing property.
If I remove ':after' it stops working, so It's definitely necessary.
Can any kind expert explain what is going on here and/or point me to a spec that explains it?
Thank you
What it actually appear to be seeing is specificity.
What :after does is add an element after the last child or content of the element that :after is applied to. See: https://developer.mozilla.org/en-US/docs/Web/CSS/::after
Here is a rough example
.featured-image {
position:relative;
padding:5px;
}
.featured-image > p {
position: relative;
z-index:10;
}
.featured-image:after {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: '';
border: 1px solid black;
background-color: #CCC;
z-index:1;
}
.site-header.featured-image:after {
background: none;
}
<div class="featured-image"><p> :after will have a background</p></div>
<div class="site-header featured-image"><p> :after wont't have a background 2</p></div>
As .site-header.featured-image:after is more specific than .featured-image:after, .site-header.featured-image:after takes preference for any conflicting styles.
With ::after and ::before you can add html elements or at least something that mimics the functionality of an html element.
::before will be placed before all the elements inside the element and ::after would be the last element.
As an example, Say we already have this markup,
<div class="some-div">
<h1>some text</h1>
<div>Another div</div>
<!-- bunch of other elements -->
</div>
If we add the following css,
.some-div::after,
.some-div::before {
content: "";
display: block;
}
It'll result in this markup,
<div class="some-div">
::before
<h1>some text</h1>
<div>Another div</div>
<!-- bunch of other elements -->
::after
</div>
Now, I'm guessing that your Wordpress theme adds an after element with a background-color of some value that overlays the image. And by setting the background of that ::after element to none you overwrite those styles and get rid of the overlay.
This snippet further elaborates what happens in the theme.
.some-div {
width: 20rem;
height: 20rem;
}
.img {
position: relative;
background-color: orangered;
width: 100%;
height: 100%;
}
.some-div:hover .img::after {
position: absolute;
top: 0;
left: 0;
content: "";
display: block;
width: 100%;
height: 100%;
background-color: black;
opacity: .3;
}
<div class="some-div">
<div class="img"></div>
<div>
My current project wants to have a decoration in front of some of the anchors (A), so far this is done by using ::before. However, it shows up that some of the links will line-break and then the second and eventual additional lines will align left with the decoration where it's nicer if it aligns with the text on first line.
There's a fiddle which I hope explains what we are trying to achieve. The .fake class is just for demonstration how it should look, it's of course not an attempt to solve it: https://jsfiddle.net/p0jLoyqz/
.decorated::before {
content: ">",
font-weight: 800
}
One solution could be to wrap the anchor in another element and add the decoration to the wrapper, but it would be good to keep down the markup as much as possible.
You can make the pseudo element position:absolute; and position it left:0; and give the container a padding of 10px or15px
.small-box {
width: 120px;
border: 1px solid gray;
padding-left: 10px;
position: relative;
}
.small-box a::before {
content: '>';
display: inline-block;
position: absolute;
left: 0px;
}
<div class="small-box">
<a class="fake" href="#">my link that line breaks</a>
</div>
Here is my code.
The HTML:
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic1.jpg" title="Bottle in the mirror"><img src="images/250-width/pic1.jpg" alt="" width="250px" height="250px" id="Bottleinthemirrorpic"></a>
<span id="Bottleinthemirror" class="spanlink"><p>Bottle in the mirror<p></span>
</div>
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic9.jpg" title="The empty glass"><img src="images/250-width/pic9.jpg" alt="" width="250px" height="250px"></a>
</div>
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic10.jpg" title="The last drop"><img src="images/250-width/pic10.jpg" alt="" width="250px" height="250px"></a>
</div>
The CSS:
#Bottleinthemirror {
width: 250px;
height: 90px;
position: absolute;
background-color: rgba(0,0,0,.55);
margin-top: 10px;
color: white;
line-height: 20px;
font-size: 12px;
}
.column1of4 {
margin: 50px;
float: left;
}
The Javascript:
$('#Bottleinthemirror').hide();
$('#Bottleinthemirrorpic, #Bottleinthemirror').hover(function(){
//in
$('#Bottleinthemirror').show();
},function(){
//out
$('#Bottleinthemirror').hide();
});
Basically, I have three pictures, two of them beside each other and the third one is below the first one. Which I hover over the first picture, I want the #bottleinthemirror span to appear, which it does. The problem is, even when the span is hidden, it still rearranges the layout of the website and moves the picture below it to another place even though it's position is set to absolute. Any idea why? When I remove the span, the website layout is normal. It changes when I put in the span even though the spans position is absolute.
Probably the problem is that span can not contain p, and in your code there are technically 2 p elements in the span (both p tags are opening). When browsers fix this incorrect markup, part of the last p may appear outside the span. If there is a need to have p inside .spanlink, it's better to use div instead of span. But is the p really necessary here?
Add
display: block;
to
#Bottleinthemirror
I set this up in a jsfiddle: http://jsfiddle.net/r2XG2/1/ and it appears to be working for me in Chrome. What browser are you in? I would try the following if it's still not working for you:
Set z-index: 100 to see if that will force it to appear over the other elements. You could also try setting the top or left values in css, that may also force it to appear in the correct place. Adding display: block; couldn't hurt either.
Edit: Updated fiddle with latest update from asker it also appears that IE won't load jsfiddle. I added position: relative to the parent div to see if that helps.
#Bottleinthemirror {
width: 250px;
height: 90px;
position: absolute;
background-color: rgba(0,0,0,.55);
margin-top: 10px;
color: white;
line-height: 20px;
font-size: 12px;
z-index: 100;
display: block;
}
.column1of4 {
margin: 50px;
float: left;
position: relative;
}
I'm looking for a way to create toolbar buttons uisng jquery ui.
I tried to create button using
<div id='menubar_home' style='vertical-align: middle;width: 20px; height: 20px;'>
</div>
and using
$('#menubar_home').button({
icons: { primary: "ui-icon-home" }
});
But image in button is not centered:
How to center image in button ?
#menubar_home {
display:table-cell;
vertical-align: middle;
text-align: center;
}
I assume there isn't transparent sides in the image.
Adds a border to img to work on positioning: border: 1px solid red;
Then check the image has a display: block; property.
Try to add margin: 0 auto; property, which aims to center a block (your image).
You will perhaps need to add !important to force the property: margin: 0 auto !important;
Hoping to help you (not sure, not easy without manipulating the code myself).
Add a padding:8px; to the button/input style to allow the icon to be properly aligned.
You could also place a span within the div like so:
<div id="menu-bar-home">
<span class="ui-icon ui-icon-home"></span>
</div>
reference it in css and change the position:
div#menu-bar-home {
position:relative;
}
div#menu-bar-home > span {
position: absolute;
left: +or-(n)px; /* so just adjust the position
}
also note you may have to adjust the z-index of the span.
best o' luck, bro.
EDIT: you may still achieve the results you want in this manner, but I though you were creating the button with the div.
As the gentleman below suggests, I would set the css for menu bar as such:
div#menu-bar-home
{
display: table-cell;
vertical-align: middle;
text-align:center;
}
I ended up doing the following in CSS:
#menubar_home {
font-size: 0;
width: 23px; top: 5;
height: 23px;
}
I'm trying to created a pure css tooltip. I have the test code here: http://jsfiddle.net/RBdn4/
The only problem with this is that in Chrome, the text is underlining on the tooltip despite having the text-decoration: none; line in the css.
Any suggestions on how to get this to stop? The link should underline, but the .tooltip text should not.
Chrome applies the link's text-decoration to the <div> because it is a child of the <a>.
Add a wrapper element around the <a> and make the tooltip <div> a sibling instead of a child of the <a>. Show the tooltip when the wrapper is :hovered.
Oh, and make that CSS make sense!
HTML
<span class="wrap">
this is text
<div class="tooltip"> this is a tooltip</div>
</span>
CSS
.tooltip {
color: #000000;
display: none;
left: 50px;
padding: 10px;
position: absolute;
top: 40px;
width: 250px;
text-decoration: none;
z-index: 100;
}
span.wrap:hover .tooltip {
display: block;
}
Demo: http://jsfiddle.net/mattball/u66GT/
Fix'd. You can't override text-decoration from the child. Also, don't put <div>s in <a>s, as Matt Ball points out.
I wasn't able to prevent the underlining from happening in Chrome while the elements were nested, but I can solve the problem by making them siblings instead.
Simply remove the <div> from inside the <a> tag, and put it next to it instead, like so:
this is text
<div class="tooltip"> this is a tooltip</div>
and use the CSS + selector (adjacent sibling) to select the hovered tooltip, rather than the child selector.
.tooltip{
display: none;
}
a:hover+.tooltip{
color: #000000;
display: block;
left: 50px;
padding: 10px;
position: absolute;
top: 40px;
width: 250px;
text-decoration: none;
z-index: 100;
}
The only change to the CSS from your original is changing the space to a plus sign.
Note the + selector doesn't work in IE6. Hopefully you're not planning to support this crumbly old browser though, right?