I have a HTML button. I have tried to render a tooltip on it based on the "title" attribute of the button and it doesn't render. Mainly because it's disabled.
I then tried wrapping the button in a span and setting the "title" attribute of the span.
Hovering over the button that is wrapped in the span still has no effect. The tooltip will render on any other part of the span that is not part of the button tag. Like if I put some text in the span as well as the button, hovering over the text produces the tooltip, but if you hover over the button it will not render.
So: how can I display a tooltip for a disabled button?
I got this working by applying the CSS pointer-events: auto; to the button, though this isn't supported on IE<11.
An ideal solution would be cross-browser compatible, and this suggestion isn't; I've tested it only on Ubuntu 9.10, though with Chrome, Firefox, Epiphany and Opera and it seems to work reliably in those, which implies reliability in their Windows counterparts. Obviously IE is an entirely different kettle of fish.
That being said:
This idea's based on the following (x)html:
<form>
<fieldset>
<button disabled title="this is disabled">disabled button</button>
</fieldset>
</form>
And uses the following CSS to achieve something close to your aim:
button {
position: relative;
}
button:hover:after {
position: absolute;
top: 0;
left: 75%;
width: 100%;
content: attr(title);
background-color: #ffa;
color: #000;
line-height: 1.4em;
border: 1px solid #000;
}
button {
position: relative;
box-sizing: border-box;
}
button:hover:after {
position: absolute;
top: 0;
left: 75%;
width: 100%;
content: attr(title);
background-color: #ffa;
color: #000;
line-height: 1.4em;
border: 1px solid #000;
box-shadow: 2px 2px 10px #999;
}
<form>
<fieldset>
<button disabled title="this is disabled">disabled button</button>
</fieldset>
</form>
It's not ideal, but it was the best non-JavaScript idea I could come up with.
This is a bug in firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=274626
Related
So I thought it'd be a great idea to add tooltips to my Neocities site, but I seem to have run into an issue I can't find the answer to...
Okay for some ungodly reason my tooltip class isn't working. I assigned my div the class, and the span inside it the tooltiptext class, but it would still just use what I had assigned the body. I only noticed this when the text was still white, when it should've been black, among other things.
Here's the html section:
<h1>please god ignore the background, I haven't found a good one yet</h1>
<img id="A wooden door framed with clip-art of flowers." style="position: relative;" src="images/flowerydoor.png" />
<div class="tooltip">
<p>this is literally copy+pasted from w3schools what the actual fuck-
<span class="tooltiptext">wait a minute this should have black text why isn't the class working</span></p>
</div>
I'm including the header and image parts because I'm desperate and worry the answer lies within one of the miniscule details
here's the stylesheet:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: white;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
body {
background-color: #fbb291;
color: white;
font-family: Verdana;
}
Once again all copy+pasted from w3schools just to make sure it wasn't me
Like I said, the text of the tooltip-assigned div still has white text, and nothing from the tooltip class...
Either the body is overriding my class, or there's something going on with the class itself that's stopping it from working.
I don't know if this helps, but I have assigned a class to my body, which works perfectly fine. I'm wondering if there's something going on with it? I mean, it shouldn't, because I have another page using said class, along with divs using other classes that work perfectly fine!
.door {
margin: 0 auto;
background-image: url("https://64.media.tumblr.com/1adbeafb3ca992a7681ede48ddedcbbd/d5886a952040c00b-9b/s250x400/a917bb1772111a1460eac4922c0502e0ba860bd1.jpg");
/*position: relative;*/
width: 600px;
height: 900px;
text-align: center;
}
I apologize if I'm not making much sense, I'm not super familiar with certain html and css terms.
In this snippet based on your code, the tooltip text is black:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: white;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
body {
background-color: #fbb291;
color: white;
font-family: Verdana;
}
<h1>please god ignore the background, I haven't found a good one yet</h1>
<img id="A wooden door framed with clip-art of flowers." style="position: relative;" src="images/flowerydoor.png" />
<div class="tooltip">
<p>this is literally copy+pasted from w3schools what the actual fuck-
<span class="tooltiptext">wait a minute this should have black text why isn't the class working</span></p>
</div>
If you're using other libraries with their own CSS or are deploying this on a third-party website, there could be a namespace collision. You can check what styles are applying to an HTML element using the Chrome DevTools or similar tools in other browsers. Here is a guide for doing this in Chrome: https://developer.chrome.com/docs/devtools/css/overrides/
I have a few buttons on my html page created like this:
<button type="button" class="read-more">Read More</button>
they are responsive in chrome and Safari - they work perfectly fine. However when I tested them in mozzilla Firefox they do not respond at all. Does anyone know what the issue could be?
I tried doing them like this :
<button type="button" class="read-more">Read more</button>
This links the button, but it does not show the clickable curser and does not pick up some of the css (e.g. the underline and the font color)
Your HTML is invalid. Use a validator. A button cannot contain an anchor and an anchor cannot contain a button. Different browsers recover from that error in different ways.
If you want to link somewhere, use an anchor.
If you want to submit a form, or have a control that does nothing but run some JavaScript, use a button.
Then apply CSS to make it look the way you want.
As Quentin said, your HTML is invalid. If you REALLY wanted to use the default buttons as redirect you could create a workaround like this:
<form action="REDIRECTURLHERE"><input type="submit" value="BUTTON TEXT"></form>
where REDIRECTURLHERE would be the location to put your destination URL in, and BUTTON TEXT the place to enter your button text.
The way you have used Button and Anchor tags are kind of invalid.
Either you use an ANCHOR tag to make a redirect or you can use the following input button. On clicking this button, will not submit the form:
<input type="button" value="Read More" class="read-more" />
If you want the form to be submitted, then you have to use the submit input type.
I have also faced issue with button is working fine in chrome but not in Mozilla fire fox. I did the below changes in code then it's working fine in both the browsers.
Old code:
<input type="search" name="focus" class="form-control search-box" placeholder="{{Messages.Label.search}}" style="width:100%"
ng-model="dashboardCtrl.searchvalue" ng-change="dashboardCtrl.searchChangeHandler()" required >
<button class="close-icon" type="reset" ng-click="dashboardCtrl.removeSearchTab()"></button>
<img ng-src="/assets/images/search-icon.svg" width="18px" style="position:relative;left: 90%;top: -30px" ng-show="dashboardCtrl.searchvalue === undefined"/>
New code:
I changed above button as div and css remains the same as below.
.search-box,.close-icon {
position: relative;
}
.search-box {
border: 1px solid $color_nobel_approx;
outline: 0;
border-radius: 0px;
padding-right:22px;
margin-top: 3px;
width: 190px;
box-sizing: border-box;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
.search-box:focus {
box-shadow: 0 0 2px 2px $color_azure_radiance_approx;
border: 1px solid #bebede;
width: 100%;
}
.close-icon {
border:1px solid transparent;
background-color: transparent;
display: block;
outline: 0;
cursor: pointer;
right: -94%;
top: 2px;
height: 0px;
}
.close-icon:after {
content: "X";
display: block;
width: 20px;
height: 20px;
position: absolute;
z-index:1;
right: 5px;
top: -30px;
margin: auto;
padding: 2px;
text-align: center;
color: black;
font-weight: bold;
font-size: 12px;
cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
The DXImageTransform.Microsoft.Shadow filter moves the visual presentation of the input but the cursor is left in its original place.
The CSS:
input {
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=0,strength=50),
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=45,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=90,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=180,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=225,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=270,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=315,strength=2);
}
Demo Page: http://jsfiddle.net/zerkms/Pzqtd/
If you open it in IE8 or IE9 you'll see that the cursor of the input is 50px above the input.
So any ideas how to fix it or may be other solutions to create shadow for input in IE8?
I need the shadow for IE8 specifically - I cannot use box-shadow
This is sort of a hack but worked for me. You might need to tweak it a bit. http://jsfiddle.net/subash1232/DDUvP/
HTML:
<div class="shadow">
</div>
<input type="text" value="value" />
CSS
input {
border: 1px solid red;
position: relative;
width: 178px;
top: 34px;
left:9px;
z-index: 1000;
}
.shadow{
height: 20px;
width: 180px;
background: white;
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=0,strength=50),
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=45,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=90,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=180,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=225,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=270,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=315,strength=2);
}
Is there a way to hide the browse button and only leave the text box that works in all browsers?
I have tried setting the margins but they show up different in each browser
No, what you can do is a (ugly) workaround, but largely used
Create a normal input and a image
Create file input with opacity 0
When the user click on the image, you simulate a click on the file input
When file input change, you pass it's value to the normal input (so user can see the path)
Here you can see a full explanation, along with code:
http://www.quirksmode.org/dom/inputfile.html
You may just without making the element hidden, simply make it transparent by making its opacity to 0.
Making the input file hidden will make it STOP working. So DON'T DO THAT..
Here you can find an example for a transparent Browse operation;
.dropZoneOverlay, .FileUpload {
width: 283px;
height: 71px;
}
.dropZoneOverlay {
border: dotted 1px;
font-family: cursive;
color: #7066fb;
position: absolute;
top: 0px;
text-align: center;
}
.FileUpload {
opacity: 0;
position: relative;
z-index: 1;
}
<div class="dropZoneContainer">
<input type="file" id="drop_zone" class="FileUpload" accept=".jpg,.png,.gif" onchange="handleFileSelect(this) " />
<div class="dropZoneOverlay">Drag and drop your image <br />or<br />Click to add</div>
</div>
I find a good way of achieving this at Remove browse button from input=file.
The rationale behind this solution is that it creates a transparent input=file control and creates an layer visible to the user below the file control. The z-index of the input=file will be higher than the layer.
With this, it appears that the layer is the file control itself. But actually when you clicks on it, the input=file is the one clicked and the dialog for choosing file will appear.
Below code is very useful to hide default browse button and use custom instead:
(function($) {
$('input[type="file"]').bind('change', function() {
$("#img_text").html($('input[type="file"]').val());
});
})(jQuery)
.file-input-wrapper {
height: 30px;
margin: 2px;
overflow: hidden;
position: relative;
width: 118px;
background-color: #fff;
cursor: pointer;
}
.file-input-wrapper>input[type="file"] {
font-size: 40px;
position: absolute;
top: 0;
right: 0;
opacity: 0;
cursor: pointer;
}
.file-input-wrapper>.btn-file-input {
background-color: #494949;
border-radius: 4px;
color: #fff;
display: inline-block;
height: 34px;
margin: 0 0 0 -1px;
padding-left: 0;
width: 121px;
cursor: pointer;
}
.file-input-wrapper:hover>.btn-file-input {
//background-color: #494949;
}
#img_text {
float: right;
margin-right: -80px;
margin-top: -14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="file-input-wrapper">
<button class="btn-file-input">SELECT FILES</button>
<input type="file" name="image" id="image" value="" />
</div>
<span id="img_text"></span>
</body>
Came across this question and didn't feel like any of the answers were clean. Here is my solution:
<label>
<span>Select file</span>
<input type="file" style="display: none">
</label>
When you click the label the select file dialog will open. No js needed to make it happen.
You can style the label to look like a button.
Here is an example using w3css and font awesome:
<label class="w3-button w3-blue w3-round">
<span><i class="fas fa-image"></i></span>
<input type="file" style="display: none" >
</label>
Of course you need to add an event listener to the input to detect a file was chosen.
HTML - InputFile component can be hide by writing some css.
Here I am adding an icon which overrides inputfile component.
<label class="custom-file-upload">
<InputFile OnChange="HandleFileSelected" />
<i class="fa fa-cloud-upload"></i> Upload
</label>
css-
<style>
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
</style>
So I found this solution that is very easy to implement and gives a very clean GUI
put this in your HTML
<label class="att-each"><input type="file"></label>
and this in your CSS
label.att-each {
width: 68px;
height: 68px;
background: url("add-file.png") no-repeat;
text-indent: -9999px;
}
add-file.png can be any graphic you wish to show on the webpage. Clicking the graphic will launch the default file explorer.
Working Example: http://www.projectnaija.com/file-picker17.html
Just an additional hint for avoiding too much JavaScript here: if you add a label and style it like the "browse button" you want to have, you could place it over the real browse button provided by the browser or hide the button somehow differently. By clicking the label the browser behavior is to open the dialog to browse for the file (don't forget to add the "for" attribute on the label with value of the id of the file input field to make this happen). That way you can customize the button in almost any way you want.
In some cases, it might be necessary to add a second input field or text element to display the value of the file input and hide the input completely as described in other answers. Still the label would avoid to simulate the click on the text input button by JavaScript.
BTW a similar hack can be used for customizing checkboxes or radiobuttons. by adding a label for them, clicking the label causes to select the checkbox/radiobutton. The native checkbox/radiobutton then can be hidden somewere and be replaced by a custom element.
Just add negative text intent as so:
input[type=file] {
text-indent: -120px;
}
before:
after:
Oddly enough, this works for me (when I place inside a button tag).
.button {
position: relative;
input[type=file] {
color: transparent;
background-color: transparent;
position: absolute;
left: 0;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
z-index: 100;
}
}
Only tested in Chrome (macOS Sierra).
the best way for it
<input type="file" id="file">
<label for="file" class="file-trigger">Click Me</label>
And you can style your "label" element
#file {
display: none;
}
.file-trigger {
/* your style */
}
As of 2022, modern browsers support file button pseudo selector. I was only struggling with Safari v16.1 which didn't work as expected and had to workaround button hiding (::-webkit-file-upload-button part).
input[type=file]::file-selector-button {
display: none;
}
input[type=file]::-webkit-file-upload-button {
display: block;
width: 0;
height: 0;
margin-left: -100%;
}
input[type=file]::-ms-browse {
display: none;
}
You may also use concise syntax:
::file-selector-button {
/* ... */
}
::-webkit-file-upload-button {
/* ... */
}
::-ms-browse {
/* ... */
}
I'm trying to remove all effects on a HTML Button element.
The HTML:
<div id="go">
<button onclick="load.update(true,cards.id);" type="submit"></button>
</div>
The CSS:
#header #go button{
display:block;
border:0 none;
cursor:pointer;
outline:none;
vertical-align:top;
width:18px;
height:33px;
background:url('../images/cards/go.png'); //Just an image to replace it all.
}
In Chrome and Firefox this works fine, but in IE (8 at least) the "push" effect of the button is still there when the button is clicked (EG the offset)
Is there any Tricks i can use to remove this effect?
Thanks in advance!
Diesal.
you need to add background styles to :hover :active :focus as well.
#header #go button:hover {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}
#header #go button:active {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}
#header #go button:focus {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}
I had a similar experience, and was able to fix it in IE8, but not IE7. See it working here:
http://jsfiddle.net/GmkVh/7/
HTML:
<button></button>
CSS:
button {
color:#fff;
background:#000;
border: none;
outline:none;
padding: 5px;
cursor: pointer;
height: 25px;
}
/*
It hits this state (at least in IE) as you're clicking it
To offset the 1px left and 1px top it adds, subtract 1 from each,
then add 1 to the right and bottom to keep it the same width and height
*/
button:focus:active {
padding-top: 4px;
padding-left: 4px;
padding-right: 6px;
padding-bottom: 6px;
color: #ccc;
}
One way would be to get rid of the <button> tag completely and use a <a href=".." /> tag in its place styled the way you want.
Just have the link do a javascript postback.
update (from comments):
one example:
Click Here
Of course, this requires javascript to be enabled and is considered by some to be an abuse of the anchor tag.
There are alternate versions if you are using .net webforms or jQuery.
After you have done whatever you like with the border etc., just put a span inside the button around the text like so:
<button class="button" type="submit"><span class="buttonspan">Blah</span></button>
Then the CSS becomes:
button {position:relative; width:40px; height:20px /* set whatever width and height */}
buttonspan {
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div class="calculation_button">
<button type="submit"><span>Count</span></button>
</div>
.calculation_button span {
position: relative;
left: 0;
top: 0;
}
works for me in IE and FF
The following helped for me in IE 10:
button:active {
position: relative;
top: -1px;
left: -1px;
}
It fixed the top perfectly, but left still had background bleed-though for my case. Still looks a bit odd if the user starts clicking and then moves the mouse off the button. Also obviously only enable the rule for relevant IE version(s).
Position relative seemed to have taken care of the problem
Simply have a wrapper within the button:
So
<button>
<div class="content">Click Me</div>
</button>
and set the DIV to position relative with top: 0, left: 0
Example below:
http://jsfiddle.net/eyeamaman/MkZz3/
It's a browser behaviour, a simple solution is to use a link tag instead of button (since you're calling a javascript function).
<img src="myimg"/>
If you still want to use the , I've found that there are some characteristics on each browser (in a simple debug):
Chrome adds outline and padding
Firefox adds a whole lot of stuff with the standart button border
IE messes with the inner text position
So to fix them, you have to manipulate the pseudo selectors for the button behaviour. And for IE, a good solution is to envolve your text on a element, and make it relative positioned. Like so:
<button type="button" class="button"><span>Buttom or Image</span></button>
<style>
button,
button:focus,
button:active{
border:1px solid black;
background:none;
outline:none;
padding:0;
}
button span{
position: relative;
}
</style>
Pen
This is a duplicate question