Using HTML Text in Tooltip
Updated: Apr 23, 2008
Views: 2762
Description: This tutorial will show you how to display HTML and plain text with the Tooltip
Part I - The Completed Project
To get started, here is an example of what we are going to build.
Part II - Setting Up the File and Adding Tooltip to a Button
The first step is to create a document, add a button and an instance of the Tooltip component.
Part III - Setting Parameters of Tooltip for HTML text
Select the instance of the Tooltip on stage, and using the component inspector (Window > Component Inspector) or parameters panel (Window > Properties >{Parameters) set the following parameters of the instance of the Tooltip:
Part IV - Setting Content
This is again done in the component inspector or parameters, set the content field to
or what string you would like. This can also be done in ActionScript with the following code
Part V - Formating the text
The text can also be formatted through component inspector and the parameters by editing the contentStyle field and changing the values of:
We will be using Mouse RollOver and RollOut events to show and hide the Tooltip. In the script we have also set the tails to change side depending on which movie clip or button you are on.
This can also be done through ActionScript:
To get started, here is an example of what we are going to build.
Part II - Setting Up the File and Adding Tooltip to a Button
The first step is to create a document, add a button and an instance of the Tooltip component.
Part III - Setting Parameters of Tooltip for HTML text
Select the instance of the Tooltip on stage, and using the component inspector (Window > Component Inspector) or parameters panel (Window > Properties >{Parameters) set the following parameters of the instance of the Tooltip:
- type: text
- In contentstyle -> textHTML: true
Part IV - Setting Content
This is again done in the component inspector or parameters, set the content field to
"<b>Bold text example with HTML!</b>
or what string you would like. This can also be done in ActionScript with the following code
myTooltip.content = "<b>Bold text example with HTML!</b>";
Part V - Formating the text
The text can also be formatted through component inspector and the parameters by editing the contentStyle field and changing the values of:
- textColor
- textFont
- textAlign
- textSize
We will be using Mouse RollOver and RollOut events to show and hide the Tooltip. In the script we have also set the tails to change side depending on which movie clip or button you are on.
This can also be done through ActionScript:
btn.onRollOver = function (){
myTooltip.content = "<b>Bold text example with HTML!</b>";
myTooltip.showTooltip();
}
btn.onRollOut = function (){
myTooltip.hideTooltip();
}
myTooltip.content = "<b>Bold text example with HTML!</b>";
myTooltip.showTooltip();
}
btn.onRollOut = function (){
myTooltip.hideTooltip();
}
