CSS tooltip non appliqué

**Nico1131** · 04/08/2014, 17h39

Bonjour,

Je me suis récemment mis à tester le widget tooltip de jQuerry qui est vraiment pas mal.
J'en ai créer un et fait des tests sur jsFiddle et tout marche très bien

mais quand j'essaye de l'implémenter tout plante. Enfin à moitié

Le problème est que le tooltip s'affiche bien mais il n'a pas l'air de récupérer le css de base (que j'ai changé) de la classe .ui-tooltip.
Du coup ça m'affiche ceci :
Nom : bugtooltip.JPG
Affichages : 223
Taille : 12,6 Ko

Nom : bugtooltip.JPG
Affichages : 223
Taille : 12,6 Ko

Au lieu de ça :
http://jsfiddle.net/7CZ7k/76/

C'est surement une erreur très bête je sais pas

Deuxième petit problème, lorsque je passe la souris par exemple sur une image où je n'ai pas défini de alt par exemple, le tooltip s'affiche avec la mention "undefined". J'ai essayé d'ajouter une condition que lorsqu'il récupère cette valeur il ne retourne rien afin que le tooltip ne s'affiche pas, mais ça ne marche pas

Nom : bugtooltip2.JPG
Affichages : 208
Taille : 11,1 Ko

**danielhagnoul** · 04/08/2014, 20h09

Bonsoir

Au lieu de ça : http://jsfiddle.net/7CZ7k/76/

Oui ! Mais le code qui produit vos illustrations ?

**Nico1131** · 05/08/2014, 09h43

Bah le code est exactement le même, du coté js et css en tout cas. Après c'est juste une balise img et un lien a comme dans l'exemple.

Dans la page principale :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<TR><TD><IMG src='/weliteimages/tel1.png'></TD><TD><A href='#' title='Acc&eacute;der &agrave; l&acute;annuaire t&eacute;l&eacute;phonique' style='text-decoration:underline;' onClick='ouvrir_annuaire();'>Annuaire</A></TD></TR>

Dans jquery-ui-1.10.4.custom.css qui concerne les tooltip :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.ui-tooltip {
    /*background: #666;*/
    background:rgba(0,0,0,.8);
    color: white;
    border: none;
    padding: 0;
    opacity: 1;
    height:auto;
    min-height:20px; 
    font-size:10px;
}
.ui-tooltip-content {
    position: relative;
    padding: 1em;
}
.ui-tooltip-content::after {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}
.right .ui-tooltip-content::after {
    top: 18px;
    left: -10px;
    /*border-color: transparent #666;*/
    border-color: transparent rgba(0,0,0,.8);
    border-width: 10px 10px 10px 0;
}
.left .ui-tooltip-content::after {
    top: 18px;
    right: -10px;
    /*border-color: transparent #666;*/
    border-color: transparent rgba(0,0,0,.8);
    border-width: 10px 0 10px 10px;
}
.top .ui-tooltip-content::after {
    bottom: -10px;
    left: 72px;
    /*border-color: #666 transparent;*/
    border-color: rgba(0,0,0,.8) transparent;
    border-width: 10px 10px 0;    
}
.bottom .ui-tooltip-content::after {
    top: -10px;
    left: 72px;
    /*border-color: #666 transparent;*/
    border-color: rgba(0,0,0,.8) transparent;
    border-width: 0 10px 10px;
}
 
body .ui-tooltip {
	border-width: 2px;
}

Dans le fichier JS :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var $j = jQuery.noConflict();
$j(document).tooltip({
		 /*track: true,*/
		 items: "img, [title]",
		 tooltipClass: "bottom",
		 position: {
			 my: "center top",
			 at: "center bottom+10"
		 },
		 content: function(){
			 var element = $j(this);
 
			 if (element.is("[title]")){
				 return  '<img src="http://image.noelshack.com/fichiers/2014/31/1406904000-info-icone-9185-16.png" /> '+element.attr( "title" );
			 }
			 if (element.is("img")){
				 return '<img src="http://image.noelshack.com/fichiers/2014/31/1406904000-info-icone-9185-16.png" /> '+element.attr( "alt" );
			 }
			 /*if (element.is("undefined")){
				 return 0;
			 }*/
		 }
		});

Edit :
Voici une page de test dans laquelle ça fait la même chose.
menu2.html
css :
jquery-ui-1.10.4.custom.css

**danielhagnoul** · 07/08/2014, 00h01

Bonsoir

J'ai repris et modifié une partie de votre code pour un test. Chez moi le code ci-dessous fait ce qui est attendu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Menu WebElite</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/sunny/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
    <style>
        .photo {
        width: 100px;
        height:80px;
        text-align: center;
        }
        .photo .ui-widget-header {
        margin: 1em 0;
        }
        .ui-tooltip img{
        vertical-align: middle;}
 
        .ui-tooltip {
            /*background: #666;*/
            background:rgba(0,0,0,.8);
            color: white;
            border: none;
            padding: 0;
            opacity: 1;
            height:auto;
            min-height:20px; 
            font-size:10px;
        }
        .ui-tooltip-content {
            position: relative;
            padding: 1em;
        }
        .ui-tooltip-content::after {
            content: '';
            position: absolute;
            border-style: solid;
            display: block;
            width: 0;
        }
        .right .ui-tooltip-content::after {
            top: 18px;
            left: -10px;
            /*border-color: transparent #666;*/
            border-color: transparent rgba(0,0,0,.8);
            border-width: 10px 10px 10px 0;
        }
        .left .ui-tooltip-content::after {
            top: 18px;
            right: -10px;
            /*border-color: transparent #666;*/
            border-color: transparent rgba(0,0,0,.8);
            border-width: 10px 0 10px 10px;
        }
        .top .ui-tooltip-content::after {
            bottom: -10px;
            left: 72px;
            /*border-color: #666 transparent;*/
            border-color: rgba(0,0,0,.8) transparent;
            border-width: 10px 10px 0;    
        }
        .bottom .ui-tooltip-content::after {
            top: -10px;
            left: 72px;
            /*border-color: #666 transparent;*/
            border-color: rgba(0,0,0,.8) transparent;
            border-width: 0 10px 10px;
        }        
    </style>
</head>
<body>
	<div id="container">
	    <div>
			<p>
                title='Un joli lien !' 
			    <a href='#' title='Un joli lien !'>LIEN</a>
			</p>
			<p>
                title='' 
			    <a href='#' title=''>LIEN</a>
			</p>
            <p>
                pas de title
                <a href='#'>LIEN</a>
            </p>
        </div>
		<div class="ui-widget photo">
		    <!--alt="Tower Bridge"-->
			<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Tower_bridge_London_Twilight_-_November_2006.jpg/800px-Tower_bridge_London_Twilight_-_November_2006.jpg" alt="Tower Bridge" class="ui-corner-all photo"/>
		</div>
        <div class="ui-widget photo">
            <!--alt=""-->
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Tower_bridge_London_Twilight_-_November_2006.jpg/800px-Tower_bridge_London_Twilight_-_November_2006.jpg" alt="" class="ui-corner-all photo"/>
        </div>
        <div class="ui-widget photo">
            <!--pas de alt-->
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Tower_bridge_London_Twilight_-_November_2006.jpg/800px-Tower_bridge_London_Twilight_-_November_2006.jpg" class="ui-corner-all photo"/>
        </div>
	</div>
	<script>
	   $(function(){
 
	       $(document).tooltip({
	           items: "img[alt], [title]",
	           tooltipClass: "bottom",
	           position: {
	               my: "center top",
	               at: "center bottom+10"
	           },
	           content: function(){
	               var jObj = $(this);
 
    			     if ( jObj.is( "[title]" ) && jObj.attr( "title" ).length > 0 ){
 
                        // debug, console, touche F12
    			         // console.log( jObj.attr( "title" ).length > 0 );
 
    				    return  '<img src="http://image.noelshack.com/fichiers/2014/31/1406904000-info-icone-9185-16.png" /> '+ jObj.attr( "title" );
    			     }
 
    			     if ( jObj.is( "img" ) && jObj.attr( "alt" ).length > 0 ){
 
    			         // debug, console, touche F12
                        // console.log( jObj.attr( "alt" ).length > 0 );
 
    				    return '<img src="http://image.noelshack.com/fichiers/2014/31/1406904000-info-icone-9185-16.png" /> '+ jObj.attr( "alt" );
    			     }
    			 }
    		});
 
    	});
	</script>
</body>
</html>

**Nico1131** · 07/08/2014, 15h29

J'ai essayé ton code et il marche très bien. Cependant je ne souhaite pas garder le style directement sur la page elle même, du coup je l'ai mis en dehors dans une autre feuille de style.
Mais en faisant cela le background n'a pas l'air de prendre effet

Nom : bug.png
Affichages : 202
Taille : 5,4 Ko

J'ai essayé de mettre le style appliqué au tooltip dans le css custom de la bibliothèque à la place de celui de base mais c'est pire encore

**danielhagnoul** · 07/08/2014, 21h31

Je viens de tester, placer le style dans un fichier externe ne pose aucun problème, il faut juste faire attention à l'ordre d'insertion dans le "head" :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<head>
    <meta charset="utf-8">
    <title>Menu WebElite</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/sunny/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="testTemp.css">
</head>

CSS tooltip non appliqué [UI]

jQuery

Vue hybride

Discussions similaires

Partager

Partager