Balsamiq Community Discussion

Callouts for close objects on the wireframe

Thanks. Maybe the “directional call-out”. How to change that? as I am having it only as a circle…

When you add the call-out, just hover over it initially to bring up the palette to change the shape and color:

I am not able to get what you are explaining. I am only able to modify the color. May be because I am with a trial version?
(I am using the trial to see if Balsami meets ous need…)

Hello again,

All our trials are fully-functioning versions so that should not be the problem.

Which version of Balsamiq are you using (e.g. Balsamiq Cloud, Balsamiq Wireframes for Desktop, etc.)?

Desktop.

Hey @simple45,
There is no directional callout out of the box, but you can create ones, as pictured:
image

Copy code and insert it into your wireframe to get all the pictured callouts:
{ "mockup": { "controls": { "control": [ { "ID": "0", "typeID": "__group__", "zOrder": "0", "measuredW": "39", "measuredH": "51", "w": "39", "h": "51", "x": "67", "y": "63", "children": { "controls": { "control": [ { "ID": "0", "typeID": "RoundButton", "zOrder": "0", "measuredW": "32", "measuredH": "32", "x": "4", "y": "19", "properties": { "shape": "triangle", "shapeRotation": "180", "color": "2848996", "borderColor": "2848996" } }, { "ID": "1", "typeID": "CallOut", "zOrder": "1", "measuredW": "39", "measuredH": "39", "x": "0", "y": "0" } ] } } }, { "ID": "1", "typeID": "__group__", "zOrder": "1", "measuredW": "39", "measuredH": "50", "w": "39", "h": "50", "x": "121", "y": "52", "children": { "controls": { "control": [ { "ID": "0", "typeID": "RoundButton", "zOrder": "0", "measuredW": "32", "measuredH": "32", "x": "4", "y": "0", "properties": { "shape": "triangle", "color": "2848996", "borderColor": "2848996" } }, { "ID": "1", "typeID": "CallOut", "zOrder": "1", "measuredW": "39", "measuredH": "39", "x": "0", "y": "11" } ] } } }, { "ID": "2", "typeID": "__group__", "zOrder": "2", "measuredW": "52", "measuredH": "39", "w": "52", "h": "39", "x": "176", "y": "63", "children": { "controls": { "control": [ { "ID": "0", "typeID": "RoundButton", "zOrder": "0", "measuredW": "32", "measuredH": "32", "x": "0", "y": "4", "properties": { "shape": "triangle", "color": "2848996", "borderColor": "2848996", "shapeRotation": "90" } }, { "ID": "1", "typeID": "CallOut", "zOrder": "1", "measuredW": "39", "measuredH": "39", "x": "13", "y": "0" } ] } } }, { "ID": "3", "typeID": "__group__", "zOrder": "3", "measuredW": "52", "measuredH": "39", "w": "52", "h": "39", "x": "244", "y": "63", "children": { "controls": { "control": [ { "ID": "0", "typeID": "RoundButton", "zOrder": "0", "measuredW": "32", "measuredH": "32", "x": "20", "y": "4", "properties": { "shape": "triangle", "color": "2848996", "borderColor": "2848996", "shapeRotation": "270" } }, { "ID": "1", "typeID": "CallOut", "zOrder": "1", "measuredW": "39", "measuredH": "39", "x": "0", "y": "0" } ] } } } ] }, "attributes": { "name": "New Wireframe 3", "order": 1000021.0254818089, "parentID": null }, "resourceID": "CC70AB24-10D0-41B9-BD18-F96C88FEDE66", "mockupH": "62", "mockupW": "229", "measuredW": "296", "measuredH": "114", "version": "1.0" }, "groupOffset": { "x": 0, "y": 0 }, "dependencies": [] }

Not clear.

Each time I need to use a callout on an object, I will have to copy all this code? it’s heavy.
And copy what code exactly where exactly?

  1. Copy and paste the code into your Balsamiq project (CTRL + C, CTRL+V)
  2. Duplicate the callout with CTRL+D in Balsamiq
  3. Edit the text into callout

1 Like

Ok, thanks.
I just noticed that I can take more callouts from “Wirereframes To Go” ?

Thanks Alexey. It works !

Good morning everybody. Do you think that Alexey’s suggestion will work for you @simple45? (thanks 10^6 for that @Alexey_Kolchenko!)

I wanted to follow this up because I am confused why you’re not seeing the same palette as me when adding a call out:

image

Can you do me a favor when you get a moment and add a call out to one of your wireframes, hover over it to bring up the color-changer palette then grab a screenshot and either paste it into a message here or send it to support@balsamiq,.com, please?

Can you also let me know which OS platform you are on (e.g. macOS Mojave, Windows 10 etc.) and which version of Balsamiq Wireframes you have installed. Thank you!

Hello alasdair :

  • I get your palette when I import that from “Wirereframes To Go”. Only from Balsamiq, I was not able.
  • Alexey suggestion is working as well

I am on a desktop version, 4.0.26

It that answers your question?

Can you do me a favor and add a callout to one of your wireframes, then hover over it and send me a screenshot of what you are seeing when you get a moment please? I’d really like to understand why you’re not seeing it by default. Thanks so much.

If it would be easier to jump on a quick Zoom/Google Hangout/whatever call and share your screen, that would be great too! Drop me a mail at support@balsamiq.com and we can do that.

Oh one other thing @simple45.

It’s not related but would you please take a minute to download and install the latest version of the app so we’re not chasing issues which might have been fixed in an update. You can always grab the latest version here: https://balsamiq.com/wireframes/desktop/

Hey guys,
There are two different callouts with different behavior:

  1. Callout as a control (exists in old versions)
  2. Callout as a feature (from version 4, and Cloud)

I always use callout as a control to annotate my wireframes, while callouts as a feature are suitable for multi user work mostly.

1 Like

Good spot @Alexey_Kolchenko. Thank you.

@simple45, can you make sure you’re using the callout in the Comments panel. I think this may be the issue.

Alasdair:
I can not install whatever I want. I am not on a personal machine…

As explained under another topic, I am trying to do some wireframes examples/samples in order to decide if we wil go with Balsamiq or not.

Until now, the most TWO important issues I have are the following :

  1. Wireframes with links - Export to pdf
    If the pdf export is not working 100% perfect, it will be a problem…

  2. iPad Container - Vertical submenu over an horizontal top menu
    The solution that Brenden provide is just not a solution

Later, I will see for what you ask for callouts, but it is no longer an issue for me. Thanks.

I understand. Perhaps you could get the ball rolling on getting appropriate permission to install an update to your existing installation of Balsamiq Wireframes?

Version 4.0.26 is a little out of date today - we released it over 2 months ago so it would be great to get you on the latest version so you don’t run into any issues which have since been fixed.

Were you able to check out the callouts in the Comments feature? I’m hoping that solves the confusion over callout shape/color.

I’m sorry to hear this @simple45 but the issue goes to the heart of our vision as a low-fidelity wireframing tool (as opposed to, say, a more traditional prototyping tool).

It’s a deliberate decision and you may find these couple of links interesting by way of background to our thinking:

It’s possible, if you need more/deeper interaction, that we’re just not the right tool for the job.

Thanks alasdair.
I continue my evaluation. I will let you know if I have other concerns.

At the same time, I will look to upgrade to the last version (even if I am still on a trial), maybe it will resolve my topic related to the pdf export.

For callouts, yes what Alexey explained about callouts from Comments is working, but I am using callouts to refer to some objects, I don’t need comments and I am not using callout-with-comments. It that answers your question?