Answer to mike's question
Firstly, there were several semicolons and parentheses missing. I don't believe they were causing a problem but I have corrected them anyway.
My suggested solutions is to use the two-function version of .hover(). In the first function (mouseenter) I have changed the behaviour to always show the tooltip, then in the new second function (mouseleave) the code will hide the tooltip only when a menu option has been selected (if the options menu has already been opened).
I have use a data('activemenu') parameter to indicate when the options menu has been opened. I have assumed that was the purpose of your data('activesong') parameter so I have removed those references - but you can easily put them back in if you need them.
-----------------------
Answer to https://forum.jquery.com/topic/please-help-to-correct-program-tool-tip#14737000003572162
HTML
<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>
</div><!-- end provincia -->
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;
}
/* END DIV "SELECT PROVINCE" */
.seleccion_provincias {
display:none;
/*this line is commented just to show functionality*/
}
JavaScript
$(document).ready(function() {
$('div.provincia')
.append('<a class="provincia_tip">City</a>','<span class="provincia_arrow">▼</div>');
var $tip_provincia = $("a.provincia_tip,span.provincia_arrow");
$('span.tip').hover(function() {
$tip_provincia.show();
$(this).click(function() {
$('span.tip').data('activesong', true);
});
$(".menu_lis li a").click(function(){
$tip_provincia.hide();
$('span.tip').data('activesong', false);
});
}, function() {
if (!$(this).data('activesong')) {
$tip_provincia.hide();
}
});
/* cache main list elements so each doc click isn't a DOM search*/
var $lists = $('div.provincia');
$lists.live('click',function(e) {
e.stopPropagation();
$lists.not(this).find('<ol:none>').hide();
var $tgt = $(e.target);
$(this).find('ol').slideToggle('fast');
if ($tgt.is('li a')) {
$(this).find('span.tip').html($tgt.html());
var value=$tgt.attr('rel');
$('#test_select').val( value);
}
});
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>' );
});
$(document).on('click','.menu_lis li a',function(e) {
e.preventDefault();
//hide tooltip
$('.seleccion_provincias :radio:eq(' + $(this).attr('rel') + ')').attr('checked',true);
});
});