Difference between "callout" and "popup" (terminology)

Question

I noticed that many in web development talk of "callout" and "callout menu" but they all seem to talk of different things.

According to Wiktionary one meaning is:

An annotation that pertains to a specific location in a body of text or a graphic, and that is visually linked to that location by a mark or a matching pair of marks.

This seems to fit an example of code named "callout"

However I don't see the added value of the word. I'd just say "alert" if it's a mere communication, or "dialog"/"menu" if there is something to do with it. If the point is in the coming out of some other part of the interface, I'd just use the metaphor of the speech bubble.

Is "callout" yet another variant of the "popup" scheme like "flyover", "popover", "popout" and many others? Sometimes I have the impression that many words are created just as euphemisms to avoid the derogatory term "popup".

Answer 1

They are different terms

---

• Callout is an older term that dates to paper-based design before the web. Callouts are used in design to draw attention to or label something. Here are some callouts labeling the orientation of a part:

  

• There are many ways to style callouts, but usually there is a line or an arrow to indicate the subject of the callout. Here are some callout styles from Microsoft PowerPoint:

  

• Popup is a user-interface term that describes content appearing on top of other content (e.g. a dialog box, warning message, or modal window).

---

There are some instances where popups are also callouts. For example, here is a popup callout used in a web tutorial:

Callout menus (menus which slide down or pop out while highlighting the trigger button) are another example of callout styling mated with popup interaction.

These popup + callout examples may give rise to some of the confusion between the two terms, but the two terms continue to represent different concepts today.