current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am trying to show a tooltip if a searchfield got a empty value. After the Tooltip is shown, i want to bind a click function to the body to hide the tooltip again. But for some reason after adding the bind command to the click function, the tooltip wont even appear. I already checked the console, but without any results. Here is my Code:

$('#search_top .search_click').click(function() {
    if($('#search_top #suchfeld').val() == '') {
        $('.search_tooltip, .search_tooltip:after').css('display', 'block');
        $('.search_tooltip, .search_tooltip:after').addClass('active');
        $('body').bind('click', closeTip);
    }
    else {
        $('#search_top').submit();
    }
});


function closeTip() {
        $('.search_tooltip, .search_tooltip:after').css('display', 'none');
}

Anyone got an idea?

share|improve this question
    
Don't forget to unbind the closeTip click handler in the closeTip function. –  BNL Aug 1 '13 at 13:16
    
webdesignledger.com/tips/9-jquery-mistakes-you-shouldnt-commit 4) 5) –  Virus721 Aug 1 '13 at 13:21
add comment

2 Answers

up vote 1 down vote accepted

I wouldn't use this kind of code but seems to be what you are looking for:

$('#search_top .search_click').click(function (e) {
    e.stopPropagation();
    if ($('#search_top #suchfeld').val() == '') {
        $('.search_tooltip').show().addClass('active');
    } else {
        $('#search_top').submit();
    }
});

$(function () {
    $('body').bind('click', closeTip);
});

function closeTip() {
        $('.search_tooltip').hide();
}
share|improve this answer
    
Worked perfect thanks. What I dont get is, why is the function to bind the closeTip function triggering after the Tooltip is opened? –  Basti Aug 1 '13 at 13:21
1  
Because when clicking on .search_click event propagate to body and then closes the tooltip. That's why i use e.stopPropagation(); –  A. Wolff Aug 1 '13 at 13:22
    
Dont know about this function, this is pretty cool, thanks a lot ! :-) –  Basti Aug 1 '13 at 13:27
add comment
up vote 0 down vote

:before and :after (and other pseudo elements) are not accessible with Javascript. You should change the class of the parent object in the spirit of the following:

div:before {
  content: 'Lorem ipsum';
  display: none;
}

div.active:before {
  display: block;
}
share|improve this answer
    
You're sure about this? Cause my this worked without any problems: $('.search_tooltip, .search_tooltip:after').css('display', 'block'); $('.search_tooltip, .search_tooltip:after').addClass('active'); –  Basti Aug 1 '13 at 13:19
    
There have been several questions about it already, including this one –  adrenalin Aug 1 '13 at 13:40
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.