You create an ASP.NET page that uses images to represent clickable actions, and all users browse with Internet Explorer. You want a pop up tooltip to appear when the user moves the mouse pointer over an image, showing text that explains what action will occur if they click it. How should you configure the Image controls?

Difficulty: Easy

Correct Answer: Set the ToolTip property to the text you want to display for each image.

Explanation:


Introduction / Context:
ASP.NET Image controls wrap standard HTML img elements and expose properties that map to common attributes such as alt and title. Providing a helpful tooltip when the user hovers over an image is a common usability requirement, especially when images function as buttons or links. In Internet Explorer and most modern browsers, the tooltip text appears when the img element has a title attribute, which in ASP.NET is set through the ToolTip property of the Image control.


Given Data / Assumptions:

    The application is an ASP.NET web application using the System.Web.UI.WebControls.Image control.
    Users access the site through Internet Explorer, which displays tooltips for the title attribute of HTML elements.
    Each image represents an action, and you want a short explanation to appear when the user hovers over the image.
    You prefer a declarative solution rather than writing custom JavaScript for simple tooltips.
    You are choosing between AlternateText, ToolTip, and event based approaches.


Concept / Approach:
The Image control has both AlternateText and ToolTip properties. AlternateText maps to the alt attribute and is primarily used for accessibility and display when images cannot be rendered. ToolTip maps to the title attribute and is specifically used to show a tooltip in browsers such as Internet Explorer when the user hovers over the element. Therefore, to display a hover tooltip that explains the action, you set the ToolTip property to the desired text for each image. No additional event handlers are required for standard tooltip behavior.


Step-by-Step Solution:
1. Locate each Image control in the ASP.NET page markup or in the code behind file. 2. For each Image control, set the ToolTip property to a descriptive string such as \"View details\" or \"Submit order\". 3. Ensure that the images are rendered as standard img elements in the browser, with the title attribute set by ASP.NET based on the ToolTip value. 4. Run the application in Internet Explorer and move the mouse pointer over the image: the browser will display the text in a small pop up tooltip near the cursor. 5. Optionally, set AlternateText for accessibility and screen readers, but remember that the visual tooltip is driven by ToolTip.


Verification / Alternative check:
You can use browser developer tools to inspect the rendered HTML for the Image control. You should see both alt and title attributes when AlternateText and ToolTip are set. Moving the mouse over the image will confirm that the browser uses title (ToolTip) to display the hover text. ASP.NET documentation for the Image control confirms that ToolTip sets the title attribute and is intended for this purpose.


Why Other Options Are Wrong:
Setting AlternateText alone affects the alt attribute and does not reliably produce a hover tooltip in all browsers; it is primarily for accessibility and fallback display.
Setting ToolTip to True is incorrect because ToolTip is a string property, not a Boolean flag, and must contain the text to be shown.
Calling RaiseBubbleEvent() or ToString() in the onmouseover event does not produce a browser tooltip and introduces unnecessary complexity when ToolTip already provides the required behavior.


Common Pitfalls:
A common mistake is confusing AlternateText and ToolTip and expecting alt text to behave like a tooltip. Another pitfall is attempting to build custom JavaScript pop ups for simple hover hints when the built in title attribute is sufficient. For more complex interactive hints, custom scripts may be appropriate, but for basic descriptive text, ToolTip is the simplest and most reliable solution.


Final Answer:
You should set the ToolTip property on each Image control to the text that describes the action, which will display as a pop up tooltip on hover.

More Questions from Microsoft Certification

Discussion & Comments

No comments yet. Be the first to comment!
Join Discussion