Tooltip customization in Tableau - Real Business Scenario

Scenario Mode

👤 Your Role: You are a sales analyst at a retail company.

📋 Request: Your manager wants an interactive sales dashboard where users can hover over data points to see detailed sales information in a clear and helpful tooltip.

📊 Data: You have monthly sales data by product category and region, including sales amount, units sold, and profit margin.

🎯 Deliverable: Create a sales dashboard with a line chart showing monthly sales trends by category. Customize the tooltip to show sales amount, units sold, and profit margin with clear labels and formatting.

Sample Data

Month	Category	Region	Sales Amount	Units Sold	Profit Margin (%)
Jan	Electronics	North	12000	150	20
Jan	Furniture	North	8000	100	25
Feb	Electronics	South	15000	180	22
Feb	Furniture	South	7000	90	24
Mar	Electronics	East	13000	160	21
Mar	Furniture	East	9000	110	26
Apr	Electronics	West	14000	170	23
Apr	Furniture	West	8500	95	27

1

Step 1: Connect to the sales data source in Tableau and load the data.

No formula needed; just connect and import the data.

Expected Result

Sales data is loaded and visible in Tableau's Data pane.

2

Step 2: Create a line chart with Month on Columns, Sales Amount on Rows, and Category on Color.

Drag 'Month' to Columns, 'Sales Amount' to Rows, and 'Category' to Color on the Marks card.

Expected Result

Line chart shows monthly sales trends for each product category with different colors.

3

Step 3: Customize the tooltip to show Sales Amount, Units Sold, and Profit Margin with clear labels and formatting.

Click Tooltip on Marks card and edit text to: "<strong>Month:</strong> {{Month}} <strong>Category:</strong> {{Category}} <strong>Sales Amount:</strong> ${{SUM([Sales Amount])}} <strong>Units Sold:</strong> {{SUM([Units Sold])}} <strong>Profit Margin:</strong> {{AVG([Profit Margin (%)])}}%"

Expected Result

Tooltip shows all requested details clearly when hovering over any data point.

4

Step 4: Format the Sales Amount as currency and Profit Margin as percentage in the tooltip.

Use Tableau's formatting options in the tooltip editor to format Sales Amount with dollar sign and commas, and Profit Margin with percent sign and one decimal place.

Expected Result

Tooltip displays Sales Amount like $12,000 and Profit Margin like 20.0%.

5

Step 5: Test the tooltip by hovering over different points on the line chart to ensure all information appears correctly.

No formula; just interact with the visualization.

Expected Result

Tooltip appears with correct, formatted details for each data point.

Final Result

Monthly Sales Trends by Category

Month -> Jan  Feb  Mar  Apr

Electronics  |----|----|----|----|
Furniture    |----|----|----|----|

Tooltip Example when hovering on Electronics in Jan:
---------------------------------------------
Month: Jan
Category: Electronics
Sales Amount: $12,000
Units Sold: 150
Profit Margin: 20.0%
---------------------------------------------

✓Electronics consistently have higher sales than Furniture each month.

✓Profit margins are stable around 20-27% across categories and regions.

✓Tooltip customization helps users quickly see detailed sales info without cluttering the chart.

Bonus Challenge

Add dynamic tooltips that also show the percentage change in Sales Amount compared to the previous month for the same category.

Show Hint

Create a calculated field for percentage change using Tableau's LOOKUP function and include it in the tooltip with clear labels.

Practice

1. What is the main purpose of customizing tooltips in Tableau dashboards?

easy

A. To export data to Excel

B. To change the color of the chart elements

C. To filter data automatically

D. To provide additional information when users hover over a visual

Solution

1. Step 1: Understand tooltip functionality

   Tooltips appear when hovering over visuals to show extra details.

2. Step 2: Identify customization purpose

   Customizing tooltips helps add meaningful info to improve user understanding.

3. Final Answer:

   To provide additional information when users hover over a visual -> Option D

4. Quick Check:

   Tooltip purpose = extra info on hover [OK]

Hint: Tooltips show info on hover, not change colors or export [OK]

Common Mistakes:

• Confusing tooltips with chart color settings
• Thinking tooltips filter data automatically
• Assuming tooltips export data

2. Which of the following is the correct way to insert a field value into a tooltip in Tableau?

easy

A. Type the field name directly without brackets

B. Insert the field using <<Field Name>> syntax

C. Use <Field Name> tags

D. Use double quotes around the field name

Solution

1. Step 1: Recall Tableau tooltip syntax

   Tableau uses double angle brackets to insert fields in tooltips.

2. Step 2: Match syntax to options

   Only <<Field Name>> matches Tableau's field insertion style.

3. Final Answer:

   Insert the field using <<Field Name>> syntax -> Option B

4. Quick Check:

   Field insertion = <<Field Name>> [OK]

Hint: Use double angle brackets <<Field>> to insert fields in tooltips [OK]

Common Mistakes:

• Typing field names without brackets
• Using HTML tags instead of Tableau syntax
• Putting field names in quotes

3. Given this tooltip text in Tableau:

Sales: <<SUM(Sales)>>
Region: <<Region>>

What will the tooltip show when hovering over a mark with Sales = 5000 and Region = 'West'?

medium

A. Sales: SUM(Sales)\nRegion: Region

B. Sales: <<SUM(Sales)>>\nRegion: <<Region>>

C. Sales: 5000\nRegion: West

D. Sales: 5000 Region: West

Solution

1. Step 1: Understand field insertion in tooltip

   Tableau replaces <<SUM(Sales)>> with the sum value and <<Region>> with the region name.

2. Step 2: Interpret line breaks and values

   \n creates a new line, so values appear on separate lines with actual data.

3. Final Answer:

   Sales: 5000\nRegion: West -> Option C

4. Quick Check:

   Tooltip shows actual values with line breaks [OK]

Hint: <<Field>> shows actual data; \n creates new line in tooltip [OK]

Common Mistakes:

• Thinking <<Field>> stays as text
• Ignoring line breaks in tooltip
• Confusing field names with values

4. You customized a tooltip but it shows the literal text <<Profit>> instead of the profit value. What is the most likely cause?

medium

A. The field name is misspelled or does not exist

B. You forgot to add a line break

C. The tooltip is disabled in the worksheet

D. You used single angle brackets instead of double

Solution

1. Step 1: Check field name correctness

   If Tableau shows <<Profit>> literally, it means it cannot find the field to replace.

2. Step 2: Rule out other causes

   Line breaks or tooltip enablement do not cause literal text display; wrong brackets cause syntax errors.

3. Final Answer:

   The field name is misspelled or does not exist -> Option A

4. Quick Check:

   Literal <<Field>> means field missing or misspelled [OK]

Hint: Check field spelling if tooltip shows <<Field>> literally [OK]

Common Mistakes:

• Assuming line breaks cause literal text
• Thinking tooltip must be enabled to show fields
• Using single < > instead of << >>

5. You want to create a tooltip that shows the product name, sales amount formatted as currency, and a custom message on separate lines. Which tooltip text will achieve this correctly in Tableau?

hard

A. Product: <<Product Name>>\nSales: $<<SUM(Sales)>>\nThank you for your interest!

B. Product: <<Product Name>>Sales: $<<SUM(Sales)>>Thank you for your interest!

C. Product: <<Product Name>>
Sales: <<SUM(Sales, '$')>>
Thank you for your interest!

D. Product: <<Product Name>>
Sales: $<<SUM(Sales)>>
Thank you for your interest!

Solution

1. Step 1: Use correct line break syntax

   Tableau tooltips use \n (backslash n) for line breaks, not HTML <br> tags or literal \n in text.

2. Step 2: Format sales as currency

   Prepending $ before <<SUM(Sales)>> formats sales as currency in tooltip text.

3. Step 3: Verify custom message placement

   Custom text can be added as plain text on its own line.

4. Final Answer:

   Product: <<Product Name>>\nSales: $<<SUM(Sales)>>\nThank you for your interest! -> Option A

5. Quick Check:

   Use \n for lines and $ before sum for currency [OK]

Hint: Use \n for new lines and $ before <> for currency [OK]

Common Mistakes:

• Using HTML
  tags inside tooltip text
• Trying to format currency inside <>
• Using literal \n instead of escape sequence