Aide:Reference Tooltips

Niveau débutant

Le gadget Reference Tooltips permet de consulter immédiatement les notes et références d'un article au cours de sa lecture, sans avoir à se déplacer en fin de page puis devoir revenir au texte en cours. En effet, il affiche une infobulle avec le contenu de la référence. Par défaut, il suffit de survoler les sources, mais vous pouvez également choisir de faire apparaître l’infobulle au clic.

Que fait-il ?

Ce gadget va tout simplement afficher pour vous le contenu de la note ou la référence qui vous intéresse, pour l'afficher immédiatement sans déplacement dans la page. S'il y a un renvoi vers une entrée bibliographique, il vous permet également de la consulter sans plus de détours. Cette fonctionnalité incite les lecteurs à lire les sources, souvent peu consultées.

C'est une version améliorée de TooltipRef, un gadget similaire mais avec une apparence un peu plus vieille.

Activation

Initialement, il devait être activé chez tous le monde suite à cette consultation sur le bistro, mais un outil similaire devrait voir le jour prochainement sur tous les wiki. Pour activer Reference Tooltips, ajoutez à votre common.css :

Ce code

/* Voir [[Aide:Reference Tooltips]] */

.rt-tooltip {
	position: absolute;
	z-index: 100;
	max-width: 350px;
	background: #fff;
	color: #222;
	font-size: 13px;
	line-height: 1.5em;
	border: 1px solid #c8ccd1;
	border-radius: 3px;
	-webkit-box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.3);
	box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.3);
	overflow-wrap: break-word;
}

.rt-tooltip.rt-tooltip-insideWindow {
	z-index: 110;
}

.rt-tooltipContent {
	padding: 8px 11px;
}

.rt-tooltip-above .rt-tooltipContent {
	margin-bottom: -8px;
	padding-bottom: 16px;
}

.rt-tooltip-below .rt-tooltipContent {
	margin-top: -10px;
	padding-top: 18px;
}

.rt-tooltipTail,
.rt-tooltipTail:after {
	position: absolute;
	width: 12px;
	height: 12px;
}

.rt-tooltipTail {
	background: #c8ccd1;
	background: -webkit-linear-gradient(bottom left, #c8ccd1 50%, rgba(0, 0, 0, 0) 50%);
	background: linear-gradient(to top right, #c8ccd1 50%, rgba(0, 0, 0, 0) 50%);
}

.rt-tooltipTail:after {
	content: "";
	background: #fff;
	bottom: 1px;
	left: 1px;
}

.rt-tooltip-above .rt-tooltipTail {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
	bottom: 0;
	left: 15px;
}

.rt-tooltip-below .rt-tooltipTail {
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	top: 0;
	left: 27px;
}

.rt-settingsLink {
	background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%0D%0A%20%20%20%20%3Cpath%20fill%3D%22%23555%22%20d%3D%22M20%2014.5v-2.9l-1.8-.3c-.1-.4-.3-.8-.6-1.4l1.1-1.5-2.1-2.1-1.5%201.1c-.5-.3-1-.5-1.4-.6L13.5%205h-2.9l-.3%201.8c-.5.1-.9.3-1.4.6L7.4%206.3%205.3%208.4l1%201.5c-.3.5-.4.9-.6%201.4l-1.7.2v2.9l1.8.3c.1.5.3.9.6%201.4l-1%201.5%202.1%202.1%201.5-1c.4.2.9.4%201.4.6l.3%201.8h3l.3-1.8c.5-.1.9-.3%201.4-.6l1.5%201.1%202.1-2.1-1.1-1.5c.3-.5.5-1%20.6-1.4l1.5-.3zM12%2016c-1.7%200-3-1.3-3-3s1.3-3%203-3%203%201.3%203%203-1.3%203-3%203z%22%2F%3E%0D%0A%3C%2Fsvg%3E);
	float: right;
	cursor: pointer;
	margin: -4px -4px 0 8px;
	height: 24px;
	width: 24px;
	border-radius: 2px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
}

.rt-settingsLink:hover {
	background-color: #eee;
}

.rt-target {
	background-color: #def;
}

.rt-enableSelect {
	font-weight: bold;
}

.rt-settingsFormSeparator {
	margin: 0.85714286em 0;
}

.rt-numberInput.rt-numberInput {
	width: 150px;
}

.rt-tooltipsForCommentsField.rt-tooltipsForCommentsField.rt-tooltipsForCommentsField {
	margin-top: 1.64285714em;
}

.rt-disabledHelp {
	border-collapse: collapse;
}

.rt-disabledHelp td {
	padding: 0;
}

.rt-disabledNote.rt-disabledNote {
	vertical-align: bottom;
	padding-left: 0.36em;
	font-weight: bold;
}

@-webkit-keyframes rt-fade-in-up {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, 20px);
		-moz-transform: translate(0, 20px);
		-ms-transform: translate(0, 20px);
		transform: translate(0, 20px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
}

@-moz-keyframes rt-fade-in-up {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, 20px);
		-moz-transform: translate(0, 20px);
		-ms-transform: translate(0, 20px);
		transform: translate(0, 20px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
}

@keyframes rt-fade-in-up {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, 20px);
		-moz-transform: translate(0, 20px);
		-ms-transform: translate(0, 20px);
		transform: translate(0, 20px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
}

@-webkit-keyframes rt-fade-in-down {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, -20px);
		-moz-transform: translate(0, -20px);
		-ms-transform: translate(0, -20px);
		transform: translate(0, -20px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
}

@-moz-keyframes rt-fade-in-down {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, -20px);
		-moz-transform: translate(0, -20px);
		-ms-transform: translate(0, -20px);
		transform: translate(0, -20px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
}

@keyframes rt-fade-in-down {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, -20px);
		-moz-transform: translate(0, -20px);
		-ms-transform: translate(0, -20px);
		transform: translate(0, -20px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
}

@-webkit-keyframes rt-fade-out-down {
	0% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(0, 20px);
		-moz-transform: translate(0, 20px);
		-ms-transform: translate(0, 20px);
		transform: translate(0, 20px)
	}
}

@-moz-keyframes rt-fade-out-down {
	0% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(0, 20px);
		-moz-transform: translate(0, 20px);
		-ms-transform: translate(0, 20px);
		transform: translate(0, 20px)
	}
}

@keyframes rt-fade-out-down {
	0% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(0, 20px);
		-moz-transform: translate(0, 20px);
		-ms-transform: translate(0, 20px);
		transform: translate(0, 20px)
	}
}

@-webkit-keyframes rt-fade-out-up {
	0% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(0, -20px);
		-moz-transform: translate(0, -20px);
		-ms-transform: translate(0, -20px);
		transform: translate(0, -20px)
	}
}

@-moz-keyframes rt-fade-out-up {
	0% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(0, -20px);
		-moz-transform: translate(0, -20px);
		-ms-transform: translate(0, -20px);
		transform: translate(0, -20px)
	}
}

@keyframes rt-fade-out-up {
	0% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(0, -20px);
		-moz-transform: translate(0, -20px);
		-ms-transform: translate(0, -20px);
		transform: translate(0, -20px)
	}
}

.rt-fade-in-up {
	-webkit-animation: rt-fade-in-up 0.2s ease forwards;
	-moz-animation: rt-fade-in-up 0.2s ease forwards;
	animation: rt-fade-in-up 0.2s ease forwards
}

.rt-fade-in-down {
	-webkit-animation: rt-fade-in-down 0.2s ease forwards;
	-moz-animation: rt-fade-in-down 0.2s ease forwards;
	animation: rt-fade-in-down 0.2s ease forwards
}

.rt-fade-out-down {
	-webkit-animation: rt-fade-out-down 0.2s ease forwards;
	-moz-animation: rt-fade-out-down 0.2s ease forwards;
	animation: rt-fade-out-down 0.2s ease forwards
}

.rt-fade-out-up {
	-webkit-animation: rt-fade-out-up 0.2s ease forwards;
	-moz-animation: rt-fade-out-up 0.2s ease forwards;
	animation: rt-fade-out-up 0.2s ease forwards
}

Et à votre common.js :

importScript('MediaWiki:Gadget-ReferenceTooltips.js')

Configuration et options disponibles

Ce gadget dispose d'un menu de configuration qui lui est propre. Ce menu est accessible en cliquant sur le bouton de réglage en haut à droite d'une infobulle et permet de configurer le gadget. Les choix sont sauvegardés avec un cookie.

Désactivation et réactivation

Le gadget peut être désactivé depuis le menu intégré. Pour réactiver le gadget, il suffit de descendre tout en bas d'une page Wikipédia et de cliquer sur le lien « Activer Référence Tooltips » comme indiqué lors de la désactivation.

Au clic ou au survol

Le menu permet également de choisir la façon dont doit apparaît l'infobulle : soit au survol (par défaut), soit en cliquant sur une référence (cela ne vous redirigera donc plus vers la section qui contient les références).

Délai avant apparition

Le menu permet aussi de régler le délai d'apparition de l'infobulle, en millisecondes, pour éviter l'apparition intempestive et non voulue d'une infobulle. Le délai peut être paramétré entre 0 et 5 000 millisecondes.

Désactivation totale et réactivation pour les utilisateurs enregistrés

Pour les utilisateurs enregistrés, le gadget peut également être désactivé dans la section « Gadgets » de vos préférences. Il ne sera alors plus chargé. C'est une option utile pour les utilisateurs qui tiennent à limiter la quantité de JavaScript chargé et exécuté.

Le gadget peut être réactivé de la même manière. Cependant, si vous aviez désactivé le gadget depuis le menu intégré et que vous réactivez le gadget moins de 90 jours^[1] après depuis vos préférences, il faudra réactiver le gadget en allant tout en bas d'une page Wikipédia et de cliquer sur le lien « Activer Référence Tooltips ».

Le gadget ne fonctionne pas ou ne réagit pas comme prévu

Vous trouverez de l'aide en écrivant un message sur Wikipédia:Questions techniques. Vous pouvez également rapporter un bug sur le projet JavaScript.

Note

↑ Le cookie qui permet de sauvegarder les choix de l'utilisateur expire au bout de 90 jours.

Voir aussi

[1] Le cookie qui permet de sauvegarder les choix de l'utilisateur expire au bout de 90 jours.

[1]

v · m Aide
Débuter	Accueil de l'aide Débuter Découvrir Wikipédia pas à pas L'essentiel à savoir Votre page d'accueil personnelle (nécessite un compte)
Règles	Principes fondateurs Conventions de plan Règles et recommandations (Résumé) Conventions de style
Consultation de Wikipédia	Consultation de l’encyclopédie Recherche d'un article Lecture critique
Ressources et listes	Catégories Couleurs Pages spéciales Modèles Bandeaux
Création et modification	Éditeur visuel Syntaxe wiki Que faire sur Wikipédia ? Orthographe Tableau
Suivi des changements	Historique des pages Contributions des utilisateurs Vandalisme
Liens et références	Liens internes Liens externes Insérer une référence
Images et médias	Atelier graphique Importation de média Licences des fichiers Insérer une image Mise en forme des images Taille des images
Gestion du compte utilisateur	Modification de ses préférences Page personnelle Signature Gadgets
Informations techniques	Utilitaires Logiciel MediaWiki Accessibilité Évaluation
Moyens de communication	Bistro Pages de discussion Forum des nouveaux contributeurs Question techniques
Communauté de Wikipédia	Statuts des utilisateurs Accueil Annonces Résolution de conflit Wikimag