This question already has an answer here:
Hide title from tooltip
(1 answer)
Closed 7 years ago.
I found out how to add a good hover tip within CSS classes referenced in HTML here
I used a combination of the "title" HTML and lharby's CSS.
I have this CSS:
span:hover {
position:relative;
cursor:pointer;
}
span[title]:hover:after {
content: attr(title);
background:yellow;
padding: 4px 8px;
color: #000;
position: absolute;
left: 0;
top: 100%;
z-index: 20;
white-space: nowrap;
}
...and my HTML is like so:
<p> . . . I couldn't stood it much longer. Then for an hour it was deadly dull, and I was fidgety. Miss Watson would say,
<span class="watson" title="Miss Watson is speaking">"Don't put your feet up there, Huckleberry;"</span> and <span
class="watson" title="Miss Watson is speaking">"Don't scrunch up
like that, Huckleberry set up straight;"</span> and pretty soon she would say, <span class="watson" title="Miss
Watson is speaking">"Don't gap and stretch like that, Huckleberry why don't you try to
behave?"</span> ...</p>
But I get two hover tips with this:
I would like to only have one; how can I 86 the smaller white one?
Title auto-gens the little white one by default so to not activate it I'd use data-attr instead of title since you are creating your own.
span[data-attr]:hover:after {
content: attr(data-attr);
}
Related
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 5 years ago.
I am building a store website and I have problem with variations of the products. So I have the main product. I have 3 boxes with variations on color and when I hover them it changes the color, but the update of the site requires from me to change it from hoverable to clickable. It works when I change the CSS from
img:hover
to
img:active
but after the click the color returns to previous one. So can after click of the color to remain there instead of going back to previous color. And can it be done without JAVASCRIPT
.box {
position: relative;
width: 100px;
height: 100px;
background-color: #F4F4F4;
}
.box label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box input {
visibility: hidden;
}
.box input:checked + label {
background-color: red;
}
<div class="box">
<input type="checkbox" id="test">
<label class="color" for="test"></label>
</div>
:active means "while being clicked on", not "has been clicked on in the past". It is designed for such things as creating a 3D button depresses when you click on it effect.
CSS has no means to track state.
You might be able to hack something using :focus, but that is designed to indicate what you will activate if you were to press Enter, so is almost never a good choice for this sort of thing. It also only allows you to have one thing focused at a time.
If you want to track state for interactive things: use JavaScript.
CSS is not designed for that.
This question already has an answer here:
Hide title from tooltip
(1 answer)
Closed 8 years ago.
I use CSS to style the abbr tool tip:
abbr {
position: relative;
}
abbr:hover::after {
position: absolute;
width: 300px;
bottom: 100%;
left: 100%;
display: block;
padding: 1em;
background: #ffffe1;
content: attr(title);
}
<abbr title="As Soon As Possible">ASAP</abbr>
However, the original old-fashioned abbr tooltip is displayed too, in addition to the styled new one. How can I suppress it?
This cannot be simply solved with the answer to a similar question. The attribute name title must be kept and replaced at run-time with a javascript.
Since you can't prevent/hide the title attribute from showing on hover, just use a different attribute. A data-* attribute such as data-title would work. Just change the markup and the content value.
Example Here
<abbr data-title="As Soon As Possible">ASAP</abbr>
abbr:hover::after {
content: attr(data-title);
/* .. */
}
As for the rounded corners, just use the border-radius property.
Just like the Title says, "How to use text as a background instead of an image?"
I'm making a little application, that I personally think is cool but will probably be a waste of peoples time, and am altering the button in the drop down button to an upside down triangle using this html code ▼ . I'm not talking about setting the z-index or anything just simply placing a character for the little arrow. I thought about leaving it blank but I don't think users would understand that they are supposed to use the menu if I did so. Therefore I'm going to use the upside down triangle.
My CSS for the drop-down list is set up like this
select {
border: none;
overflow: hidden;
background: no-repeat right #ffffff;
-moz-appearance: none;
-webkit-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Put the text inside an HTML tag with class .text-background, set CSS styles to
.text-background {
position: absolute;
z-index: 1;
}
and set z-index to the elements you want to be on top of the text with z-index higher than 1.
edit:
If you know what the size of the select element is, you probably want to position that text over the dropdown. This however will block the button.
JSFiddle
If you want better looks and functionality you can use a 3rd party libraries such as this or this.
edit 2:
I just found this CSS only solution given by Danield that's probably going to suite your needs better.
https://stackoverflow.com/a/13968900/1419575
Try This, as suggested by Paulo Bergantino:
JS Fiddle
Click Here
HTML
<div id="container">
<div id="background">
Text to have as background
</div>
Normal contents
</div>
CSS
#container{
position: relative;
}
#background{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
overflow: hidden;
}
I'm trying to make a white div box turn red when it's hover overed, so far i have this in my css:
#white{
width: 90px;
height: 90 px;
background-color:white;
position: absolute;
top: 10px;
left:10px;
}
a:hover #white{
color:red;
width: 90px;
height: 90 px;
position: absolute;
top: 10px;
left:10px;
}
and this in my html:
<div id="white">
</div>
but it doesn't work at all, help please?
You need to go back and read a bit more about HTML and CSS basics.
You are targeting a link that doesn't exist.
You don't set a background color for the hover state, so how could it change? You change the TEXT color, but not the background, and your question says you want to change the color of the
You have a space between 90 and px, so that breaks your CSS.
Something like this is probably what you want: Link
The problem is a:hover #white, you're targeting an <a> tag that is being hovered with a child that has id="white".
You want to use this:
#white:hover {
...
}
You're also on the hover event you're using color and not background-color.
http://jsfiddle.net/xuj44/1/
This question has been answered but it seems like you are trying to run before you can walk, http://w3schools.com/ is possibly where every front-end web developer began learning html/css - it will give you the basic fundamentals of the language so its well worth reading through each section. Even seasons developers have to pop back to it occasionally just to jog there memory. Good luck, and keep trying :)
This question already has answers here:
Is it possible to format an HTML tooltip (title attribute)? [duplicate]
(9 answers)
Closed 7 years ago.
Is it possible to style the tooltip for the alt attribute?
I wish to style the background, font color etc for the html alt attribute.
Can anyone help me with this please?
You cannot design the default tooltip (i.e. styling the alt attribute) but you can use Javascript, CSS and a <div> or <span> tag to create something similar:
http://shurie.com/coder/code_details.asp?codeid=4
Or these CSS ONLY tooltips:
http://sixrevisions.com/css/css-only-tooltips/
Semantic Tooltips With Pure CSS3 and HTML5
This technique is so simple that I’m really surprised nobody has come up with it before, please shoot me link if they have but I couldn’t find anything after some extensive Google action.
Currently, most people use something like this to produce a pure CSS tooltip:
Title <span>Tooltip</span>
(Code from CSSGlobe)
But this is another extraneous element in our HTML and won’t really make much sense to screenreaders so let’s try to produce a more semantic solution.
See it in action
The solution lies in the title attribute and CSS’s content property. We can use the attribute to dynamically insert the text with CSS. The HTML is as basic as you like:
<p>I <span title="I mean really, really" class="tooltip">really</span> like pie.</p>
Using CSS’s content property, we then produce some content after the span like so:
.tooltip:hover:after { content: attr(title); }
HTML Dog has a list of what we can use with the content property.
Our tooltip will now show up when we hover over the span. We should probably make it a bit more visible.
.tooltip { border-bottom: 1px dotted #333; position: relative; cursor: pointer; }
.tooltip:hover:after { content: attr(title); position: absolute; white-space: nowrap; background: rgba(0, 0, 0, 0.85); padding: 3px 7px; color: #FFF; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin-left: 7px; margin-top: -3px; }
Looking to the Future
With HTML5 finally allowing custom attributes, we can make this even more semantic.
<p>I <span data-tooltip="I mean really, really." class="tooltip">really</span> like pie.</p>
You can read more about HTML5 custom attributes at JavaScript Kit.
You will then need to change the CSS to:
.tooltip:hover:after { content: attr(data-tooltip); }
You can do this by using CSS and positioning and showing and hiding a div in javascript.
this shows you one way.
http://sixrevisions.com/tutorials/javascript_tutorial/create_lightweight_javascript_tooltip/