I'm feeling quite frustrated after finding out that the bootstrap button class seems to break the hover function in standard CSS.
I didn't really want to use tooltips, so I decided to try making my own grey box appear next to my button to display why it's disabled on hover. Here's my code:
HTML
<a class="btn btn-danger disabled" disabled="disabled" href="" id="statement-delete" onclick="return false;">Delete
<span id="delete-info"></span>
</a>
CSS
#statement-delete:hover #delete-info {
display: block;
}
#delete-info {
display: none;
background: #C8C8C8;
margin-left: 0px;
padding: 10px;
position: absolute;
z-index: 1000;
width:200px;
height:100px;
}
I thought I surely must be doing something wrong until I used a JSFiddle, and it magically worked (before adding the Bootstrap reference). However, as soon as I added the reference to the Bootstrap, no hover...
Here's the fiddle: http://jsfiddle.net/ga82Lbm5/1/
If you remove the reference to bootstrap at the left, you'll see that it works.
Is it possible to use the Hover function over a Bootstrap button? Or will I have to resort to using some custom jQuery to do this?
Bootstrap adds the rule pointer-events:none to your code for disabled elements to prevent the hover from working. You can undo this by reverting the change with:
a.btn.disabled {
pointer-events: auto;
}
jsFiddle example
I'd suggest you remove the property disabled="disabled" since you want the hover function. Logically, if you think about it, the element must be "enabled" for the hover to work. Similarly, you could also remove the CSS class disabled class for the same reason.
The thing is Bootstrap adds the property pointer-events: none; to the class disabled. The definition of this property (borrowed from Mozilla Developer Network (https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events)) is :
The CSS property pointer-events allows authors to control under what
circumstances (if any) a particular graphic element can become the
target of mouse events.
You solution really is to nullify the effects of this property.Thus, removing the aforementioned properties, this works. See below :
#statement-delete:hover #delete-info {
display: block;
}
#delete-info {
display: none;
background: #C8C8C8;
margin-left: 0px;
padding: 10px;
position: absolute;
z-index: 1000;
width:200px;
height:100px;
top: 48px;
left: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<a class="btn btn-danger" href="" id="statement-delete" onclick="return false;">Delete<span id="delete-info"></span></a>
Related
During my random testing I saw a behavior where I put an anchor tag inside another anchor tag. I made a jsfiddle.
<a class="groupPopper">
<a class="name"> content</a>
</a>
But in the developer tool it appears different:
I believe we cannot put an anchor tag inside another anchor tag as clicking on the inner anchor will bubble up the click event to the parent anchor tag which should not be allowed.
Is my assumption correct?
As #j08691 describes, nested a elements are forbidden in HTML syntax. HTML specifications do not say why; they just emphasize the rule.
On the practical side, browsers effectively enforce this restriction in their parsing rules, so unlike in many other issues, violating the specs just won’t work. The parsers effectively treat an <a> start tag inside an open a element as implicitly terminating the open element before starting a new one.
So if you write <a href=foo>foo <a href=bar>bar</a> zap</a>, you won’t get nested elements. Browsers will parse it as <a href=foo>foo</a> <a href=bar>bar</a> zap, i.e. as two consecutive links followed by some plain text.
There is nothing inherently illogical with nested a elements: they could be implemented so that clicking on “foo” or “zap” activates the outer link, clicking on “bar” activates the inner link. But I don’t see a reason to use such a structure, and the designers of HTML probably didn’t see one either, so they decided to forbid it and thereby simplify things.
(If you really wanted to simulate nested links, you could use a normal link as the outer link and a span element with a suitable event handler as the inner “link”. Alternatively, you could duplicate links: <a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>.)
Nested links are illegal.
Links and anchors defined by the A element must not be nested; an A
element must not contain any other A elements.
I had the same issue as #thinkbonobo and found a way to do it without JavaScript:
.outer {
position: relative;
background-color: red;
}
.outer > a {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.inner {
position: relative;
pointer-events: none;
z-index: 1;
}
.inner a {
pointer-events: all;
}
<div class="outer">
<div class="inner">
You can click on the text of this red box. It also contains a
W3C compliant hyperlink.
</div>
</div>
The trick is to make an anchor covering the whole .outer div, then giving all other anchors in the inner div a positive z-index value. Full credit goes to https://bdwm.be/html5-alternative-nested-anchor-tags/
you can use object tag to solve this problem.
such as
<a><object><a></a></object></a>
I stumbled upon this issue when trying to make a div panel clickable by also have buttons. The workaround that I recommend is to use javascript events.
Here is a codepen example I created....
http://codepen.io/thinkbonobo/pen/gPxJGV
Here's the html portion of it:
Example of link embedded in link....
<div class=panel onclick="alert('We\'ll hi-ii-ii-ide')">
If you say run<br>
<button onclick="app.hitMe(event)">more</button><br>
<br>
And if you say hide...<br>
</div>
Notice how the event for the inner link is captured and stopPropagation() is used. this is critical to make sure the outer trigger doesn't run.
It is invalid HTML.
You can't nest a elements.
So, by definition, the behaviour is undefined.
For nested anchors, to prevent the inner event from bubbling up to the outer event, you want to stop propagation as soon as the inner event is clicked.
OnClick of inner event, use e.stopPropagation();
I know It's an old post, but I want to point out that user9147812 answer worked better than any other of the suggestions.
This is how I stacked the whole thing.
<style>
* {
padding: 0;
margin: 0 border:0;
outline: 0;
}
.outer_anchor {
display: inline-block;
padding: 5px 8px;
margin: 2px;
border: 1px solid #252632;
border-radius: 3px;
background: #1c1d26;
color: #fff;
text-shadow: 0 1px 0 #616161;
box-shadow: 1px 1px 3px #000;
transform: translateY(0);
transition: background 250ms;
}
.inner_anchor {
display: inline-block;
padding: 5px 8px;
margin: 2px;
border: 1px solid #252632;
border-radius: 3px;
background: #1c1d26;
color: #fff;
transform: translate(0px);
}
.inner_anchor:hover {
background: #647915;
}
</style>
ItemX<object><a class="elim_btn" href="#" title='Eliminate'>×</object></a>
Don't do it like that. I was facing the same issue in my app.
You can simply add <div> tag in top and <a> tags at child level.
something like:
<div id="myDiv">
</div>
make sure you add click event for myDiv in your script file as well.
window.location.href = "#dashboardDetails";
You cannot nest 'a' tags. Instead set outer container as 'position:relative' and second 'a' as 'position:absolute' and increase its z-index value. You'll get the same effect.
<div style="position:relative">
<img src="image-1.png">
<a style="position:absolute;top:0;z-index:99" href="page1.php"></a>
</div>
.outer {
position: relative;
background-color: red;
}
.outer > a {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.inner {
position: relative;
pointer-events: none;
z-index: 1;
}
.inner a {
pointer-events: all;
}
<div class="outer">
<div class="inner">
You can click on the text of this red box. It also contains a
W3C compliant hyperlink.
</div>
</div>
This is a bad way of coding but you can try this -
aaaa <table><tr><td><a href="2">bbbb </td></tr></table> </a>
I have a button on a form;
<button type="button" class="button" onclick="validate_form_newsletter_wide( form )"><img src="index_htm_files/btn_newsletter_wide.png" alt="Send"></button>
It styled using;
<style>
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
#form_newsletter_wide .button {
position:relative;
float: right;
cursor:pointer;
border: 0px;
padding: 0px;
margin: 0px;
margin-top: -1px;
z-index:100;
}
</style>
When clicked in Firefox nothing about the button changes, in Chrome I get a highlight border around the button which I can live with but in IE it's more of a pressed effect where the button almost seems to move down and right. Is there anyway to prevent this?
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
During my random testing I saw a behavior where I put an anchor tag inside another anchor tag. I made a jsfiddle.
<a class="groupPopper">
<a class="name"> content</a>
</a>
But in the developer tool it appears different:
I believe we cannot put an anchor tag inside another anchor tag as clicking on the inner anchor will bubble up the click event to the parent anchor tag which should not be allowed.
Is my assumption correct?
As #j08691 describes, nested a elements are forbidden in HTML syntax. HTML specifications do not say why; they just emphasize the rule.
On the practical side, browsers effectively enforce this restriction in their parsing rules, so unlike in many other issues, violating the specs just won’t work. The parsers effectively treat an <a> start tag inside an open a element as implicitly terminating the open element before starting a new one.
So if you write <a href=foo>foo <a href=bar>bar</a> zap</a>, you won’t get nested elements. Browsers will parse it as <a href=foo>foo</a> <a href=bar>bar</a> zap, i.e. as two consecutive links followed by some plain text.
There is nothing inherently illogical with nested a elements: they could be implemented so that clicking on “foo” or “zap” activates the outer link, clicking on “bar” activates the inner link. But I don’t see a reason to use such a structure, and the designers of HTML probably didn’t see one either, so they decided to forbid it and thereby simplify things.
(If you really wanted to simulate nested links, you could use a normal link as the outer link and a span element with a suitable event handler as the inner “link”. Alternatively, you could duplicate links: <a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>.)
Nested links are illegal.
Links and anchors defined by the A element must not be nested; an A
element must not contain any other A elements.
I had the same issue as #thinkbonobo and found a way to do it without JavaScript:
.outer {
position: relative;
background-color: red;
}
.outer > a {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.inner {
position: relative;
pointer-events: none;
z-index: 1;
}
.inner a {
pointer-events: all;
}
<div class="outer">
<div class="inner">
You can click on the text of this red box. It also contains a
W3C compliant hyperlink.
</div>
</div>
The trick is to make an anchor covering the whole .outer div, then giving all other anchors in the inner div a positive z-index value. Full credit goes to https://bdwm.be/html5-alternative-nested-anchor-tags/
you can use object tag to solve this problem.
such as
<a><object><a></a></object></a>
I stumbled upon this issue when trying to make a div panel clickable by also have buttons. The workaround that I recommend is to use javascript events.
Here is a codepen example I created....
http://codepen.io/thinkbonobo/pen/gPxJGV
Here's the html portion of it:
Example of link embedded in link....
<div class=panel onclick="alert('We\'ll hi-ii-ii-ide')">
If you say run<br>
<button onclick="app.hitMe(event)">more</button><br>
<br>
And if you say hide...<br>
</div>
Notice how the event for the inner link is captured and stopPropagation() is used. this is critical to make sure the outer trigger doesn't run.
It is invalid HTML.
You can't nest a elements.
So, by definition, the behaviour is undefined.
For nested anchors, to prevent the inner event from bubbling up to the outer event, you want to stop propagation as soon as the inner event is clicked.
OnClick of inner event, use e.stopPropagation();
I know It's an old post, but I want to point out that user9147812 answer worked better than any other of the suggestions.
This is how I stacked the whole thing.
<style>
* {
padding: 0;
margin: 0 border:0;
outline: 0;
}
.outer_anchor {
display: inline-block;
padding: 5px 8px;
margin: 2px;
border: 1px solid #252632;
border-radius: 3px;
background: #1c1d26;
color: #fff;
text-shadow: 0 1px 0 #616161;
box-shadow: 1px 1px 3px #000;
transform: translateY(0);
transition: background 250ms;
}
.inner_anchor {
display: inline-block;
padding: 5px 8px;
margin: 2px;
border: 1px solid #252632;
border-radius: 3px;
background: #1c1d26;
color: #fff;
transform: translate(0px);
}
.inner_anchor:hover {
background: #647915;
}
</style>
ItemX<object><a class="elim_btn" href="#" title='Eliminate'>×</object></a>
Don't do it like that. I was facing the same issue in my app.
You can simply add <div> tag in top and <a> tags at child level.
something like:
<div id="myDiv">
</div>
make sure you add click event for myDiv in your script file as well.
window.location.href = "#dashboardDetails";
You cannot nest 'a' tags. Instead set outer container as 'position:relative' and second 'a' as 'position:absolute' and increase its z-index value. You'll get the same effect.
<div style="position:relative">
<img src="image-1.png">
<a style="position:absolute;top:0;z-index:99" href="page1.php"></a>
</div>
.outer {
position: relative;
background-color: red;
}
.outer > a {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.inner {
position: relative;
pointer-events: none;
z-index: 1;
}
.inner a {
pointer-events: all;
}
<div class="outer">
<div class="inner">
You can click on the text of this red box. It also contains a
W3C compliant hyperlink.
</div>
</div>
This is a bad way of coding but you can try this -
aaaa <table><tr><td><a href="2">bbbb </td></tr></table> </a>
Following the CSS style trick from this question I was able to create a custom upload button. Now, the challenge is to make the entire portion of the button change the mouse pointer icon to the hand one.
The way I partially achieved this can be seen here (jSFiddle). As you can see, the cursor only appears to be a hand while hovering the right area of the the button (I'm in the latest version of firefox).
The css (also on jSFiddle)
<span id="uploadMask">
<input type="file" multiple="multiple" name="file" id="file_upload">
<span class="button">Select Documents</span>
</span>
The css (also on jSFiddle)
#uploadMask {
width:160px;
display: block;
float:left;
overflow: hidden;
height:32px;
margin-right: 5px;
position: relative;
}
#uploadMask input {
position: absolute;
top:0;
bottom: 0;
right:0;
opacity: 0;
z-index: 2;
cursor: pointer;
}
#uploadMask .button {
background:#ccc;
line-height:24px;
padding:5px 15px;
display:block;
}
Any ideas?
There's nothing you can do it seems to get the cursor property to work on the "text" portion of <input type="file">, but the "button" part does display the hand pointer.
http://jsfiddle.net/gN2JM/17/
No hand cursor on the red part!
Borrowing from the solution to this question:
Is there a way to make the native `browse` button on a file input larger cross browser?
You can enlarge the button size by adding:
#uploadMask input {
font-size:200px; /* Any high number to guarantee it's big enough,
overflow:hidden on the parent takes care of the rest */
}
http://jsfiddle.net/gN2JM/15/
If you take off the opacity: 0;, you'll see why there is a place where the cursor:pointer doesn't show up. http://jsfiddle.net/gN2JM/13/ Whenever you are moused over the actual button, it gives the regular cursor.
Use THIS for a solution that supposedly works all the time, or just set the position of the button to go off the edge of the screen>> http://jsfiddle.net/gN2JM/14/
How to add title='mandatory' from css to the following
<label class='mandatory'>Name</label>
.mandatory
{
background-image:url(/media/img/required.gif);
background-position:top right;
background-repeat:no-repeat;
padding-right:10px;
font-weight:bold;
}
Well, although it's not actually possible to change the title attribute, it is possible to show a tooltip completely from CSS.
You can check a working version out at http://jsfiddle.net/HzH3Z/5/.
What you can do is style the label:after selector and give it display:none, and set its content from CSS. You can then change the display attribute to display:block on label:hover:after, and it will show.
Like this:
label::after {
content: "my tooltip";
padding: 2px;
display: none;
position: relative;
top: -20px;
right: -30px;
width: 150px;
text-align: center;
background-color: #fef4c5;
border: 1px solid #d4b943;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
}
label:hover::after {
display: block;
}
You can't. CSS is a presentation language. It isn't designed to add content (except for the very trivial with :before and :after).
Quentin is correct, it can't be done with CSS. If you want to add a title attribute, you can do it with JavaScript. Here's an example using jQuery:
$('label').attr('title','mandatory');
As Quentin and other suggested this cannot totally be done with css(partially done with content attribute of css). Instead you should use javascript/jQuery to achieve this,
JS:
document.getElementsByClassName("mandatory")[0].title = "mandatory";
or using jQuery:
$('.mandatory').attr('title','mandatory');
document.getElementsByClassName('mandatory')[0].setAttribute('title', 'mandatory');
$('.jmandatory').attr('title', 'jmandatory');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Place the Mouse Over the following elements to see the title,
<br/><br/>
<b><label class="mandatory">->Javascript Mandatory</label></b>
<br/><br/>
<b><label class="jmandatory">->jQuery Mandatory</label></b>
It is possible to imitate this with HTML & CSS
If you really really want dynamically applied tooltips to work, this (not so performance and architecture friendly) solution can allow you to use browser rendered tooltips without resorting to JS. I can imagine situations where this would be better than JS.
If you have a fixed subset of title attribute values, then you can generate additional elements server-side and let the browser read title from another element positioned above the original one using CSS.
Example:
div{
position: relative;
}
div > span{
display: none;
}
.pick-tooltip-1 > .tooltip-1, .pick-tooltip-2 > .tooltip-2{
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<div class="pick-tooltip-1">
Hover to see first tooltip
<span class="tooltip-1" title="Tooltip 1"></span>
<span class="tooltip-2" title="Tooltip 2"></span>
</div>
<div class="pick-tooltip-2">
Hover to see second tooltip
<span class="tooltip-1" title="Tooltip 1"></span>
<span class="tooltip-2" title="Tooltip 2"></span>
</div>
Note: It's not recommended for large scale applications because of unnecessary HTML, possible content repetitions and the fact that your extra elements for tooltip would steal mouse events (text selection, etc)
Can do, with jQuery:
$(document).ready(function() {
$('.mandatory').each(function() {
$(this).attr('title', $(this).attr('class'));
});
});
While currently not possible with CSS, there is a proposal to enable this functionality called Cascading Attribute Sheets.
On the one hand, the title is helpful as a tooltip when moving the mouse over the element. This could be solved with CSS-> element::after.
But it is much more important as an aid for visually impaired people (topic handicap-free website). And for this it MUST be included as an attribute in the HTML element. Everything else is junk, botch, idiot stuff ...!