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 ?

Visualisation d'une référence sur l'article Sac de Dinant.

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

(Image provisoire de la version anglaise) Menu contextuel de réglage, accessible à tous, permettant notamment de désactiver la fonctionnalité. (Choix enregistré pour un utilisateur et pour la session d'une IP)

Ce gadget dispose d'un menu de configuration qui lui est propre. Ce menu est accessible en cliquant sur le bouton de réglage Bouton en forme d'engrenage 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

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

Voir aussi

v · m
Aide
Débuter
Règles
Consultation de Wikipédia
Ressources et listes
Création et modification
Suivi des changements
Liens et références
Images et médias
Gestion du compte utilisateur
Informations techniques
Moyens de communication
Communauté de Wikipédia
Rédaction thématique

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.