Answer to mike's other problems
I think I have solved the problems - by reducing the number of event handlers to an absolute minimum and making the user selection event fire once only.
I have assumed that the page will be refreshed after the selection has been processed - thus re-enabling the single-shot .one() event handler. If you don't refresh the page after a selection then you simply need to move the handler code from .one() up into a "click" clause of the .on() handler above it.
I have also shortened the initial declaration of $tip_provincia.
I don't know what this line did, because I do not think there is a selector called ":none". :-
$lists.not(this).find('<ol:none>').hide();
....so, I have removed it completely.
Whilst I was writing some code yesterday evening I stumbled across an article saying that .hover() with two functions has been deprecated in jQuery v1.8, so I used this opportunity to change the .hover() into two .on() clauses instead.
-----------------------
Answer to https://forum.jquery.com/topic/please-help-to-correct-program-tool-tip#14737000003572162
HTML
<article>
<div class="provincia"><!-- start provincia -->
<span class="tip">Choose city</span>
<ol>
<li>
<div class="tipo_provinc">
<div class="seleccion_provincias"></div>
<ul class="menu_lis"></ul>
</div>
</li>
</ol>
<output id="test_select"></output>
</div><!-- end provincia -->
</article>
CSS
span.provincia_arrow,
a.provincia_tip{
display:none;
position:absolute;
}
a.provincia_tip{
height: 23px;
text-align:center;
padding:4px 10px 0 10px;
width: auto;
background-color:#000;
border-radius: 5px;
border: #F00 solid 2px ;
margin-left:-95px;
margin-top:-50px;
color:#FFF;
text-decoration:none;
}
span.provincia_arrow{
margin-left:-75px;
margin-top:-25px;
}
/* START DIV "SELECT PROVINCE" */
div.provincia {/*div superior*/
font-family: sans-serif;
font-size: 15px;
margin-top: 115px;
margin-left:155px;
}
div.provincia span.tip {
display: inline-block;
min-width: 128px;
height: 13px;
color: #000;
background-color: #FFF;
padding: 3px 0 7px 4px;
cursor: pointer;
border:3px solid #CCC;
}
div.provincia ol {/*div inf of "province"*/
position: absolute;
display: none;
border: 1px solid #333;
width: 96px;
overflow: hidden;
background-color: #000;
z-index: 10000;
margin-left:;
margin-top: -2px;
height:100px;
border:1px solid #0CF;
}
div.provincia ol li a {
margin-left:15px;
font-size:16px;
color: #999;
}
div.provincia ol li a:hover {
background-color: #666;
color: #FFF;
}
div.provincia ol li:last-child {
border-bottom: none;
}
div.provincia output#test_select {
position:relative;
top:150px;
left:-115px;
}
/* END DIV "SELECT PROVINCE" */
.seleccion_provincias {
display:none;
/*this line is commented just to show functionality*/
}
JavaScript
$(document).ready(function () {
/* cache frequent elements to prevent many DOM searches*/
var $lists = $('div.provincia ol');
var $spanTip = $('span.tip');
var $tip_provincia = $('<a class="provincia_tip">City</a><span class="provincia_arrow">▼</span>');
/* construct menu */
var provs = ['Aires', 'Catamarca', 'Chaco', 'Chubut', 'Córdoba'];
$.each(provs, function (i, v) {
$('.seleccion_provincias')
.append('<input type= "radio" name="provincias" value="' + v + '" />');
$('.menu_lis')
.append('<li><a href="#" rel="' + i + '">' + v + '</a></li>');
});
$('div.provincia').append($tip_provincia);
$spanTip.on({
mouseenter: function () {
$tip_provincia.fadeIn('fast');
},
mouseout: function () {
if (!$(this).data('activesong')) {
$tip_provincia.fadeOut('fast');
}
}
});
$spanTip.on('click', function () { //on click
$lists.slideDown('fast');
$spanTip.data('activesong', true);
});
$('.menu_lis li a').on('click', function (e) {
e.preventDefault();
e.stopPropagation();
var $tgt = $(this);
$spanTip.html($tgt.html());
$spanTip.data('activesong', false);
$('#test_select').val('Seleccion: ' + $tgt.attr('rel'));
$('.seleccion_provincias :radio:eq(' + $tgt.attr('rel') + ')').prop('checked', true);
$lists.slideUp('fast');
$tip_provincia.fadeOut('fast');
});
});