Tooltip javascript scomparso

**Malux** · 04-06-2016, 10:50

Salve a tutti,
finalmente sono riuscito a trovare un tooltip in javascript semplice che potesse andare per alcuni contenuti. Non masticando bene questo linguaggio chiedo qualche consiglio ai più esperti/appassionati.

Ho riscontrato un problema di visualizzazione, o meglio, non si vede per nulla il tooltip, se non un breve accenno (su una sola riga in verticale all'estrema destra) fuori dal content.

Posto il link della pagina di prova per capire meglio cosa intendo ("1788>Austrum gaudorum lastricus >Phasellus viverra" gli altri tooltip non li ho modificati per il momento).

Allego il codice:

codice:

<script type="text/javascript">                
$(document).ready(function() {
               //Tooltips
                   $(".tip_trigger").hover(function(){
                      tip = $(this).find('.tip');
                      tip.show(); //Show tooltip
                   }, function() {
                      tip.hide(); //Hide tooltip          
                   }).mousemove(function(e) {
                      var mousex = e.pageX + 20; //Get X coodrinates
                      var mousey = e.pageY + 20; //Get Y coordinates
                      var tipWidth = tip.width(); //Find width of tooltip
                      var tipHeight = tip.height(); //Find height of tooltip
        
                      //Distance of element from the right edge of viewport
                      var tipVisX = $(window).width() - (mousex + tipWidth);
                      //Distance of element from the bottom of viewport
                      var tipVisY = $(window).height() - (mousey + tipHeight);
          
                      if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
                        mousex = e.pageX - tipWidth - 20;
                    } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
                         mousey = e.pageY - tipHeight - 20;
                      } 
                          tip.css({  top: mousey, left: mousex });
                       });
                    });
            </script>

Forse devo inserire qualche riferimento allo z-index per farlo comparire sopra il content oppure è un problema di compatibilità con i contenuti dinamici che ho inserito?

**cavicchiandrea** · 04-06-2016, 12:15

Rilevo questi errori nella console

codice:

SyntaxError: missing ) after condition

if((e.which == 85) || (e.which == 67) &amp;&amp; isCtrl == true)















timelin...03.html (linea 74, col 62)


av-adv#2: 728x90 2 0x0
?ref=cr...5118618 (riga 135)


TypeError: canvas is undefined

canvas.width = 795;














zoomcanvas.js (linea 2, col 1)


POST http://hits-i.iubenda.com/write?db=hits1
204 No Content

 82ms
jquery.min.js (riga 4)


ParametriIntestazioniPostXML
Errore interpretazione XML: nessun elemento trovato Indirizzo: moz-nullprincipal:{f642bcdb-c8d4-5b46-ad01-8315d82435da} Riga numero 1, colonna 1:
^

una volta sistemati verifica se i problemi persistono. Pagina testata com Apple MAC e firefox 46

**Malux** · 04-06-2016, 15:50

Originariamente inviata da cavicchiandrea

Rilevo questi errori nella console

una volta sistemati verifica se i problemi persistono. Pagina testata com Apple MAC e firefox 46

Grazie cavicchiandrea per la risposta.

Più che correggere ho disattivato direttamente gli script a cui si riferiscono, che al momento ho eliminato nel file di prova per verificare il funzionamento del tooltip. Mentre saranno presenti in quello definitivo che ho già "assemblato".

Congelando quegli script però continuo ad avere problemi di visualizzazione. Pensi che ci sia qualche conflitto oppure c'entra qualcosa il css o i contenuti dinamici?
Posso lavorare su quel file oppure per farti capire meglio, carico direttamente quello completo con gli script etc?

Per esempio qui è solo la parte interessata dal tooltip:

codice HTML:

<!doctype html><html>
<head>        
<meta charset="utf-8">        
<meta http-equiv="X-UA-Compatible" content="IE=edge">        
<title>Cristian Belli Projects</title>        
<meta name="viewport" content="width=device-width, initial-scale=1.0">         
<meta name="description" content="Thumbnail Proximity Effect with jQuery and CSS3" />       
<meta name="keywords" content="thumbnails, jquery, proximity, effect, css3, scale, mouse, hover" />
<link rel="stylesheet" type="text/css" href="css/menu_site_timelineprov.CSS" media="screen">     <link rel="stylesheet" type="text/css" href="css/timeline_vertical.css" media="screen">        
<link rel="stylesheet" type="text/css" href="css/tooltip.CSS" media="screen">        
<link rel="stylesheet" type="text/css" href="css/modalwin_infotool.CSS" media="screen">        
<link rel="stylesheet" type="text/css" href="css/tooltipmap.CSS" media="screen">        
<link rel="stylesheet" type="text/css" href="css/dropdown_time.css" media="screen">       
<link rel="stylesheet" type="text/css" href="css/dropdownprov.css" media="screen">                
<!--[TOOLTIP PLUGINS]-->        
<link rel="stylesheet" type="text/css" href="css/tooltipjquery.css" media="screen">         
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<!--[END TOOLTIP PLUGINS]-->                 
<!--[TOOLTIP SCRIPT]-->           
<script type="text/javascript">
$(document).ready(function() {              
//Tooltips                   
$(".tip_trigger").hover(function(){                     
 tip = $(this).find('.tip');                      
tip.show(); //Show tooltip                   
}, function() {                      
tip.hide(); //Hide tooltip                             
}).mousemove(function(e) {                     
 var mousex = e.pageX + 20; //Get X coodrinates                     
 var mousey = e.pageY + 20; //Get Y coordinates                      
var tipWidth = tip.width(); //Find width of tooltip                      
var tipHeight = tip.height(); //Find height of tooltip                             
 //Distance of element from the right edge of viewport                      
var tipVisX = $(window).width() - (mousex + tipWidth);                      
//Distance of element from the bottom of viewport                     
 var tipVisY = $(window).height() - (mousey + tipHeight);                                
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport                        
mousex = e.pageX - tipWidth - 20;                    
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport                         
mousey = e.pageY - tipHeight - 20;                      
}                           
tip.css({  top: mousey, left: mousex });                       
});                    
});            
</script>         
<!--[END TOOLTIP SCRIPT]-->            
</head>    
 <body>         
<div>                    
<p>                        
<font size="2.5"><cite>&laquo;L’altro ramo di conoscenze, di cui dopo il 1780 maggiormente si accrebbe lo studio in Sicilia, fu quello delle scienze economiche e di commercio. Erano intenti                                                           
<a class="tip_trigger" href="#">Phasellus viverra                                    
<span class="tip">nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.                                     
</span>                         
</a>                         
</cite></font>        
</div>                 
<!--TOOLTIP SCRIPT-->

</body>
</html>

Funziona benissimo, ma sull'altro file no...

**cavicchiandrea** · 04-06-2016, 16:18

In effetti ora non da più errori la pagina esempio, ma richiami due librerie jquery la vesione 3 e la 11 chiaramente la versione più recente sovrascrive la più vecchia e lo script tooltip basandosi sulla v. 3 con la 11 non funziona (come normale che sia).
Soluzioni:
1) Tieni la versione 3 funzionante (sconsigliato)
2) Cerchi un tooltip più recente che utilizzi jquery 11 o superiore
3) Ti sviluppi un tooltip tuo

**Malux** · 05-06-2016, 05:19

Originariamente inviata da cavicchiandrea

Soluzioni:
1) Tieni la versione 3 funzionante (sconsigliato)
2) Cerchi un tooltip più recente che utilizzi jquery 11 o superiore
3) Ti sviluppi un tooltip tuo

Grazie cavicchiandrea per i consigli.
In effetti lo script è di 5 anni fa e quelli più aggiornati sono un po' più articolati da modificare.
Continuerò la mia ricerca, magari ne troverò uno che farà il caso mio.

In caso ci fossero problemi col nuovo script, dovrò posterare su questo thread oppure ne dovrò aprire uno nuovo?

**cavicchiandrea** · 05-06-2016, 07:48

Dipende se il titolo si addice al problema che riscontrerai

**ciro78** · 05-06-2016, 12:33

meglio se apri una eventuale nuova discussione. definendo un titolo più indicativo

Discussione: Tooltip javascript scomparso

Strumenti discussione

Ricerca discussione

Visualizza

Tooltip javascript scomparso

Permessi di invio