在Titanium中创建Tooltip

在这篇文章中将说明如何在使用Titanium开发的iPhone应用中创建tooltip！

有时候我们会在导航栏上放置一个图片按钮，但是一个简单的图片按钮还不能够完全让用户理解这个按钮的用途。

例如:


rightNavButton 按钮点下后会有什么动作呢？这是一个ebook阅读器的app.

以下的效果如何呢:


这样用户就知道了，当我点下这个按钮的时候是继续阅读文章呢。

那么这样的效果在Titanium中是如何做出来的呢？

tooltip其实是一个设置了tip图像的背景的简单的view。

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

把“Continue reading” label添加到这个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);

然后把这个tip view添加到index窗口中。(当然前提是我们已经创建好了index_win。)

index_win.add(lasttipView);

现在当我们打开index_win的时候，tooltip就会被显示出来，用户就知道rightNavButton是做什么的呢。但是如果tooltip一直显示在那里的话，我们就需要想办法隐藏它。以下代码创建了一个动画，在click事件中将他显示出来。

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 );

【原文】 http://cssgallery.info/create-a-nifty-tooltip-in-titanium/