Tag Archives: tooltip

iPhone tooltip with Titanium

Create a nifty tooltip in Titanium

In this post I will show how to create a tooltip to those that are using Titanium to develop their iPhone apps.
Sometimes when we set a button with an icon – lets say in navbar – a simple icon is not enough to make the user understand what the button is supposed to do.

For example this one:

What would the rightNavButton do ? The application is an ebook reader – if this helps, but I’m sure it will not….

What about this:

Now you know that by hitting this button you can continue your reading – in case something took you out from the chapter, like  changing a setting, or answering the phone or whatever…

So let’s start.

The tooltip is a simple view with the tip image set as background:

var lasttipView =  Titanium.UI.createView({
width:205,
height:57,
backgroundImage:"img/bubble.png",
top:0,
right:3
});

The “Continue reading” is a simple label added to this view

var lasttipLabel =  Titanium.UI.createLabel({
text:'Continue reading',
color:'#fff',
width:205,
height:34,
top:16,
font:{
fontFamily:'Helvetica Neue',
fontSize:13,
fontWeight:'bold'
},
textAlign:'center'
});
 
lasttipView.add(lasttipLabel);

and the index window contains the tip view

index_win.add(lasttipView);

I supposed we already have the index_win created.

Now when we open the index_win the tooltip will be there and the user will know what the rightNavButton does. But if the tooltip stays there it becomes annoying so we need to find a way to hide it. I choose to hide it when the user clicks the button by using a smooth fadeout.

The code below creates an animation and attaches it to the click event.

var anim_out = Titanium.UI.createAnimation();
anim_out.opacity=0;
anim_out.duration = 250;
 
 
last_read =  Titanium.UI.createButton({
image:"img/tag1.png"
});
 
 
last_read.addEventListener('click', function() {
lasttipView.animate(anim_out);
});
 
index_win.setRightNavButton( last_read );

Ok, here is the button code too but for simplicity I removed some parts that actually display the chapter and trigger other functions.

That’s all. Pretty simple, isn’t it ?

PS. You can use the bubble image in your apps if you want, only just let me know – and if you are curious about the app here it is:
Youth, by Isaac Asimov iPhone ebook.

Check the Spanish version of this post:
Crear una ingeniosa herramienta de notificación en Titanium