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

6 thoughts on “Create a nifty tooltip in Titanium”

  1. Hi Mr. Shettar Pavan – please understand that in order for you to learn Titanium you have to start writing code yourself and experiment by trial and error. Unfortunatelly I lack the necessary time to start coding the application in your place so I suggest you to plan your approach and try to build the app step by step – from basic interface to more complex functionality. In case you will encounter problems on your path I am sure my tutorials, me and the Appcelerator Forum will be more than happy to help and answer your questions.

    Regards.

  2. I have implemented your code into my project, but now my problem is that the tool tip is not reloading if a navigate away and them back to the page? I have to close down the app and open it up again for the tool tip to appear. Anyway I can fix this?

    Best regards
    Dennis Nielsen

  3. The tooltip it’s there only that it has opacity 0. You could try to catch the open event of the window and set here the opacity of the tooltip back to 1.

  4. This is great, thanks for sharing. I’m trying to implement this but it has an issue with the animation portion. “[WARN] JavaScript compiler reported “Expected ‘(end)’ and instead saw ‘}’.””

    Are you willing to provide the working code for this js file?

Comments are closed.