Develop Reference

Tooltip on bootstrap checkbox label doesn't hide when marking / clearing the checkbox

This will show a tooltip when hovering over the label of a checkbox and hide when not hovering.
HTML:
<div style="margin: 2em 0 0 2em">
<label id="checkbox-label">
<input type="checkbox">Checkbox</label>
</div>
JS:
$('#checkbox-label').tooltip({
title: "This tooltip won't disappear when the checkbox is checked.",
placement: "right"
})
The problem is when a user checks or unchecks the checkbox, the tooltip doesn't hide until the user clicks somewhere else on the screen.
How can I make this tooltip disappear when the checkbox is checked/unchecked?
Here's a JS Fiddle reproducing the problem: http://jsfiddle.net/eLax5hdq/5/

I just ran into the same problem, but came up with a different solution:
$('#checkbox-label').on('show.bs.tooltip change', function (e) {
$(this).blur();
});

Just FYI although this has been answered.
For future reference when the tooptip is about to be shown bootstrap fires the show.bs.tooltip event. This way you can conditionally check for something. if you pass the event to the function you can run event.preventDefault() if the condition fails and you do not want the tooltip to show.
http://jsfiddle.net/SeanWessell/eLax5hdq/9/
$('#checkbox-label').on('show.bs.tooltip change', function (e) {
$this = $(this);
if (e.type == 'show' && $this.find(":checkbox").is(":checked")) {
e.preventDefault();
} else if (e.type == 'change') {
$this.find(":checkbox").is(":checked") ? $this.tooltip('hide') : $this.tooltip('show');
}
});

Use $(this).tooltip("hide") and not $(this).tooltip("close") as .tooltip() dose not support a parameter with the value "close".
Fiddle Example
As noted in the Bootstrap documentation the methods that tooltip supports are: .tooltip('hide'), .tooltip('show'), .tooltip('toggle'), and .tooltip('destroy').

Answering my own question with an easier solution, but I'll leave the accepted answer as is.
Bootstrap shows a tooltip on hover and focus by default. Clicking on the checkbox left the element in focus, which is why the tooltip wouldn't hide without some extra code, as shown in the other two answers to this question.
The fix was to specify that I only want the tooltip on hover by adding data-trigger="hover" to the <label> element.
In summary, change this:
<div>
<label id="checkbox-label">
<input type="checkbox">Checkbox
</label>
</div>
To:
<div>
<label id="checkbox-label" data-trigger="hover">
<input type="checkbox">Checkbox
</label>
</div>

The default value for trigger is 'hover focus', thus the tooltip stay visible after a button is clicked, until another button is clicked, because the button is focused.
$('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
})

jQuery Tools Overlay - Two buttons with different close conditions

I have the following jQuery Tools overlay:
<div id='editDescriptiontOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>
Background info: The HTML for this overlay is static. I have a list of items each having their own Edit link. When a given Edit link is clicked, the overlay is generated by calling: $('a[rel=#editDescriptionOverlay]').overlay( { ... } ); and the input is populated with the respective text.
The Save button needs to validate the text in the input element and close the overlay if and only if the validation is successful. Otherwise, the overlay must remain open. The Cancel button simply closes the overlay without validation.
The validation logic has been independently verified to work.
I've tried setting the onBeforeClose event during overlay generation as a means of validation. Taking this approach, both the Save and Cancel buttons needed the same class .close. Unfortunately, the condition applies to all .close elements in the overlay so even the Cancel button was validating.
I've also tried binding a click event to the Save button immediately after generating the overlay, like so:
$('.save', $('#editDescriptionOverlay'))
.unbind('click')
.bind('click', function() {
if (validateText) {
console.log("Validation passed.");
$('a[rel=#editDescriptionOverlay]').overlay().close();
}
else {
console.log("Validation failed.");
}
});
The console.log's confirm that the validation is working, but the overlay doesn't close.
Any insight is appreciated, thanks.

For jquery widgets, public methods should be called as follows:
$('a[rel=#editDescriptionOverlay]').overlay("close");
wherein close is the method name that you wish to call.
If a method accepts parameters, then, these should be added as parameters right after the method name.
Updated:
I am sorry. I just had time to check what jQuery Overlay Tools is and I am mistaken. This is not similar to any jQuery widget, hence, my comment above will also not work for this case. I tried your code above and it worked. The overlay was closed. But, when I tried it with multiple <a rel="#editDescriptionOverlay">, which I think is what you did. It did not work. My suggestion would be to use just one <a rel="#editDescriptionOverlay"> and use a dummy anchor element for the Edit link, which when clicked would trigger a click to <a rel="#editDescriptionOverlay">. You can do something like this:
<script type="text/javascript">
$(document).bind("ready", function(e){
$("a[rel]").overlay();
$('.save', $('#editDescriptionOverlay')).unbind("click").bind("click", function(){
if (validationValue){
$("a[rel=#editDescriptionOverlay]").overlay().close();
}
});
});
function clickThis(){
$("a[rel=#editDescriptionOverlay]").trigger('click');
return false;
}
</script>
Edit1
Edit2
<a rel="#editDescriptionOverlay">Dummy</a>
<div id='editDescriptionOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>

I'd prefer binding an event to the save button (the second one you mentioned). Actually your code looks fine, except that you probably don't need to bind the event to $('#editDescriptionOverlay') and you have typo in your html markup above (<div id='editDescriptiontOverlay' should be <div id='editDescriptionOverlay').
See here for an example.

run function onclick of disabled checkbox

I have a checkbox that I do not want the user to have direct access to. I want them to accept some terms. To do this I want them to be able to click on a disabled checkbox which opens this mini popup (not checking the box) that contains the terms so the reader can read them and accept them. Once they accept them the popup will close and the checkbox will be checked. The issue I have is i cant figure out to run a function onclick of the disabled checkbox.

Handling the click on a disabled element is indeed tricky ... but I don't think it's the desirable user experience anyway. If a checkbox is disabled, some users will see that and be disinclined to even attempt clicking it. Instead, consider intercepting the click event and using it for your own purposes using preventDefault.
<input type='checkbox' id="cb" name="cb" />
$(document).ready(function() {
$("#cb").click(function(e) {
// cancel click event so that checkbox remains unchecked
e.preventDefault();
// display popup here, then manually check the checkbox if needed
}
});

$('#chk').click(function () {
if (confirm('Accept')) {
$(this).attr('checked', 'checked');
}
else {
$(this).attr('checked', false); }
});

A disabled checkbox might not handle click events properly and would be displayed as "disabled".
But, you could try this:
add an attribute to the checkbox to store if the popup was displayed (e.g. data-popup="0")
handle the onclick event on the checkbox
if the popup was displayed (data-popup="1" ) simply return true to allow to use to check it
if the popup was not displayed (data-popup="0" ), then prevent the default behaviour, set data-popup="1" and display the popup with the terms and conditions
Another improvement, depending on the design of your popup, could be the add a new checkbox in that popup and when the user reads the terms and conditions, he can accept the terms and conditions directly from the popup. If you do that, you need to treat the click event on the checkbox in the popup and automatically check the checkbox on your page as well.

#dbaseman
Here is my code.
Take a look.Here,I get the alert on div but not on checkbox.
<html>
<head>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#checkbox, #hello").click(function(){
alert("hello");
});
});
</script>
</head>
<body>
<div id="checkbox">
<p> hello</p>
<input type="checkbox" id="hello" disabled="disabled" />
</div>
</body>
</html>

how to make a visible <div> and not blocker

I have a html code and its.
<input type="submit" class="sub" /><div class="img"></div>
Now the CSS code is
.img{backgound: url(image.png);height:10px;width:10px;}
img class position (located) on the submit. now when i try to click the submit (the img class is over it). it not clicked because of the img class.
now i want to make the div class is visible but at the same time it not blocks when i click the submit.
I dont want to use background for the submit, because im already using it on the submit with another image.
i wish that you understand me.
and im sorry for my english ...
Thanks,

assuming ur code looks like
<form id="myform" action="myaction.php">
...
<input type="submit" class="sub" /><div class="img"></div>
...
</form>
Jquery:
$('#myform .img').click(function(){
$('#myform').trigger('submit');
})

Try :
$('.img').click(function(){$(this.parentNode).click();});

So what you want is to have an img on top of a submit, and make it so that when you click that img, the form is still submitted? If so, then you're probably better off using JavaScript. Here's a sample of what it'd look like with jQuery:
$('.img').click(function() {
$('.img').siblings('[type=submit]').click();
});
This makes it so that when you click the image, it will act as if you clicked the submit button too.
On that note, there must be a better way to do this (i.e. without JavaScript and extra divs), but since I don't know much about your problem, I can't think of anything.

if you have a button with already a background image on it ,
and you want that when you press the div above - the button will also be pressed youll need to do this :
on the div element you put:
onclick='simulateButtonPress();'
and in js : (via Jquery)
function simulateButtonPress()
{
$("#btnId").trigger('click');
}

$('.img').click(function() {
$(this).prev('input.sub:submit').trigger('click');
});
// click event for submit
$('input.sub:submit').click(function() {
// here goes you submit actions
alert('submit');
});

$('.img').click(function() {
return true;
});

onchange not working with radio button

I have a few radio buttons which should call hider(something); when they change, meaning when they are checked or unchecked. This works, i.e. when checked they call the JS function, however, if they're unchecked due to selecting another radio button from that group, it does not call the js script again.
Do I need to use something else than onchange?
This is what the radio buttons look like at the moment:
<input name="ostype" type="radio" value="0" onchange="hider(solaris);">solaris
<input name="ostype" type="radio" value="1" onchange="hider(linux);">linux
My hider function is currently:
function hider(divid) {
if ($(divid).is('.hidden')) {
$(divid).removeClass('hidden');
} else {
$(divid).addClass('hidden');
}
}

Since this question is still not answered correctly yet ranks quite high for me in Google for "radio button onchange", here's a proper solution for anyone still looking.
If you're using jQuery, just use jQuery's attribute selector as noted by Flavius Stef.
OP, it's not entirely clear what your code does. Let's assume in your code you want to add the "hidden" class to whatever radio button is active.
$("your selector here").change(function() {
$('input[name="' + this.name + '"]').removeClass("hidden");
$(this).addClass("hidden");
});
Please note the difference between $(this) (the jQuery object) and this (the DOM object). Basically I'm removing the "hidden" class from every input that goes by the same name, and then I add the "hidden" class to the current input.
Of course I'm assuming here that you're not using duplicate names for different inputs on the page. Also note that this would only work for radio buttons, as the radio button "change" event only fires when activated, not when deactivated.
Listening for onchange on both checkboxes and radio buttons
In my case, I wanted to add a "checked" class to active radio buttons and checkboxes. Since the checkbox fires the "onchange" event both when checked and unchecked, I needed a bit of extra code.
$('input[type="radio"]').change(function() {
$('input[name="' + this.name + '"]').removeClass("checked");
$(this).addClass("checked");
});
$('input[type="checkbox"]').change(function() {
$(this).toggleClass("checked", ($(this).is(":checked")));
});
The latter function uses toggleClass to set the "checked" class if .is(":checked") is true.
Alternatively you might want to combine the two functions into something like:
$('input[type="radio"], input[type="checkbox"]').change(function() {
if(this.type == "radio")
$('input[name="' + this.name + '"]').removeClass("checked");
$(this).toggleClass("checked", ($(this).is(":checked")));
});
Either way, always be careful when listening for an onclick event as it will not fire when the input is activated through keyboard navigation.

Use onclick.
Also as the argument of your function call you'll need to either use a string with the id as a jQuery selector ('#solaris') - better yet use this:
<input name="ostype" type="radio" value="0" onclick="hider(this);">solaris

Bind change event to ALL radio buttons on document ready:
$(function(){
$('input[name=list_type]:radio').on("change", function(){
showHideBlock();
});
showHideBlock();
});
Show -- hide block depends on ONE radio button status:
function showHideBlock(){
if ($("#Option").is(':checked')){
$('#Block').show();
} else {
$('#Block').hide();
}
}

<input name="ostype" type="radio" value="0" onclick="hider('solaris');">solaris
<input name="ostype" type="radio" value="1" onclick="hider('linux');">linux
function hider(divid) {
$( 'div.div_class' ).hide();
$( '#' + divid ).show();
}
Make sure you add a class to call the divs and make sure you put quotes around solaris and linux in the function calls

Here's a version that you might draw inspiration from (tested on Chrome and FF):
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
</head>
<body>
<input type="radio" name="ostype" checked="checked" onclick="hider('linux')">linux
<input type="radio" name="ostype" onclick="hider('solaris');">solaris
<div id="content">
<div id="linux">linux</div>
<div id="solaris" style="display:none;">solaris</div>
</div>
<script>
function hider(divname) {
$('#content div').each(function(){
$(this).hide();
});
$('#'+divname).show();
}
</script>
</body>
</html>

If I understand you correctly you can just use an onClick on every button and hide the others while showing the one your clicking on.
Like this:
function showInfo(info)
{
var info = document.getElementById("1");
info.style.display = "block";
var info = document.getElementById("2");
info.style.display = "none";
}
So the first one is showing and the second one is hiding.
Then just add one for every div that should be hidden.
You can also do this with jQuery.
function showAndHide(val1, val2)
{
$(val1).hide();
$(val2).show();
}
And don't forget to have style="display:none" in every div.

did you declare the vars solaris and linux?
otherwise your browser should show you an Error