Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex ToolTip – Appliquer des Styles aux ToolTips

Vous pouvez personnaliser l'apparence des toolTips en utilisant les styles. Le Framework Flex ne permet pas de fixer des styles pour des toolTips individuels, vous devez fixer le style des toolTips globalement pour toutes les instances. Vous pouvez le faire en changeant la définition du style ToolTip en utilisant le sélécteur CSS de la classe. L'exemple suivant montre comment changer la définition du style en utilisant le tag Style (il peut aussi être fait dans une feuille CSS séparée):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Style>
		ToolTip{
			fontFamily: "_typewriter";
			background-color:#FFFFFF;
		}
	</mx:Style>
	<mx:Button label="Tool Tip" toolTip="Exemple de toolTip avec style"/>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

Vous pouvez aussi utiliser de l'ActionScript pour fixer le style en utilisant la méthode StyleManager.getStyleDeclaration() pour récupérer la déclaration de ToolTip. Vous pouvez ensuite utiliser setStyle() pour changer un style individuel:

var toolTipDeclaration:CSSStyleDeclaration = StyleManager.getStyleDeclaration("ToolTip");
toolTipDeclaration.setStyle("fontFamily", "_typewriter");

Si vous voulez utiliser une police spécifique, et que vous voulez être sûr que l'utilisateur sera capable de voir le toolTip avec la police spécifiée, vous pouvez embarquer la police (Embed). Faire un Embed d'une font pour les toolTips marche exactement comme si vous le feriez pour du texte en général. L'exemple suivant embarque une police appelée Georgia:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Style>
		@font-face{
			src: local("Georgia");
			fontFamily:GeorgiaEmbedded;
		}
		ToolTip{
			fontSize:15;
			fontFamily:GeorgiaEmbedded;
			background-color:#FFFFFF;
		}
	</mx:Style>

	<mx:Button label="Tool Tip" toolTip="Exemple de toolTip avec font Embed"/>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application