Shorten function + css. Please (tool tip)

Shorten function + css. Please (tool tip)

Shorten function + css. Please

View efect: http://jsfiddle.net/biofusionart/4esNj/12/  

HTML:
Copy code
  1.      <a class="provincia" href  ="#">Provincia</a> 
  2.      <a class="provincia2" href  ="#">Provincia</a>    
  3.      <span class="provincia">▼</span> 
  4.      <span class="provincia2">▼</span>   
  5.  
  6. <div class="provincia">

  8. <span class="tip">Elige provincia</span>

  10.  <ol>
  11.      <li>                       
  12.          <div class="cont_scroll tipo_provinc menu_holder_scroll">
  13.          
  14. <div class="seleccion_provincias"></div>

  16. <ul class="menu_lis slider_scroll"></ul>​
  17.  
  18.          </div>
  19.      </li> 
  20.  </ol>
  21.                
  22. </div>

JS:

Copy code
  1. var tip_provincia = $('a[class="provincia"],span[class="provincia"] ')
  2. var tip_provincia2 = $('a[class="provincia2"],span[class="provincia2"] ')
  4. $("span.tip").hover(function(){  
  5.   $(tip_provincia).toggle();  
  6. $(this).click(function(){
  7.   $(tip_provincia2).show();
  8.  $(".menu_lis li a").click(function(){ 
  9.    $(tip_provincia2).hide();
  10.  });
  11.          });
  12. });


CSS:

Copy code
  1. a.provincia,
  2. a.provincia2{
  3. display:none;
  4. height: 23px;
  5. text-align:center;
  6. padding:4px 10px 0 10px;
  7. width: auto;
  8. background-color:#000;
  9. border-radius: 5px;
  10.         border: #F00 solid 2px ;
  11. margin-left:180px;
  12. margin-top:-40px;
  13. color:#FFF;
  14. text-decoration:none;
  15. }
  16. span.provincia,
  17. span.provincia2,
  18. .enviar_form a.provincia,
  19. .enviar_form a.provincia2{
  20. display:none;
  21. }
  22. span.provincia,
  23. span.provincia2{
  24. margin-left:200px;
  25. margin-top:-15px;  
  26. }
  27. span.provincia,
  28. span.provincia2,
  29. a.provincia,
  30. a.provincia2{
  31.     position:absolute;  
  32. }