Answer to sepuede28cba's question

The code shows the tooltip upon mouseenter. When the <select> is clicked the code shows the tooltip and also set a variable to tell us later that the user is in the process of selecting something. If the user has not clicked <select> then the tooltip is hidden immediately upon mouseout. If the user has clicked <select>, which we know because of our variable, we will only hide the tooltip once an option has been selected. Notice that I've had to include a "stopPropagation" flag to tell the code to ignore the first click after an option has been selected (by means of the change event). ----------------------------- In answer to:- https://forum.jquery.com/topic/i-need-help-to-ignore-id-in-effect-tool-tip-please

by alano

HTML

<article>
    <div id="color">
        <select id="menu">
          <option>black </option>
          <option>white</option>
          <option>yellow</option>
          <option>blue</option>
        </select>
    </div>
    <output id="result"></output>
</article>

CSS

#color{
    margin-top:200px;
    width:60px;
}
#color_tip1,
#color_tip2{
    position:absolute;
    display:none ;
    margin-top:-100px;
    height: 23px;
    text-align:center;
    padding:4px 10px 0 10px;
    width: auto;
    background-color:#000;
    border-radius: 5px;
    border: #F00 solid 2px ;
    margin-left:10px;
    margin-top:-65px;
    color:#FFF;    
    text-decoration:none;
}
#result {
    position:absolute;
    top:300px;
}

JavaScript

$(document).ready(function () {

    var optionMenuOpen = false;
    var stopPropagation = false;
    $('#color')
        .append('<div id="color_tip1" class="tooltip">Color</div>')
        .append('<div id="color_tip2" class="tooltip">Color</div>');
    var $tooltips = $('.tooltip');
    $('#menu')
        .on({
            mouseenter: function () {
                $tooltips.show();
            },
            mouseout: function () {
                var $_debug1 = 0;
                if (!(optionMenuOpen)) $tooltips.hide();
            },
            click: function () {
                if (stopPropagation) {
                    stopPropagation = false;
                } else {
                    optionMenuOpen = true;
                }
            },
            change: function () {
                optionMenuOpen = false;
                $tooltips.hide();
                stopPropagation = true; //ignore next Click
                //process this selection of menu option...
                $('#result').text('Result: ' + $('#menu').val());
            }
        });

});