Flex 3 - 使用自定义工具提示
我正在使用 tooltipManager,如此处所述。
我想为按钮栏的按钮显示自定义工具提示。
按钮栏的声明如下:
<mx:ButtonBar id="topToolbar" height="30" dataProvider="{topToolbarProvider}"
iconField="icon" itemClick="topToolbarHandler(event)"
buttonStyleName="topButtonBarButtonStyle"
toolTipField="tooltip"/>
到这里为止,一切正常。我确实看到工具提示中显示了正确的文本。
然后,我使用前面引用的教程创建了一个自定义工具提示管理器:
public class TooltipsManager
{
private var _customToolTip:ToolTip;
public function TooltipsManager()
{
}
public function showToolTipRight(evt:MouseEvent, text:String):void
{
var pt:Point = new Point(evt.currentTarget.x, evt.currentTarget.y);
// Convert the targets 'local' coordinates to 'global' -- this fixes the
// tooltips positioning within containers.
pt = evt.currentTarget.parent.contentToGlobal(pt);
customToolTip = ToolTipManager.createToolTip(text, pt.x, pt.y, "errorTipRight") as ToolTip;
customToolTip.setStyle("borderColor", "0xababab");
// Move the tooltip to the right of the target
var xOffset:int = evt.currentTarget.width + 5;//(customToolTip.width - evt.currentTarget.width) / 2;
customToolTip.x += xOffset;
}
public function showToolTipAbove(evt:MouseEvent, text:String):void
{
var pt:Point = new Point(evt.currentTarget.x, evt.currentTarget.y);
// Convert the targets 'local' coordinates to 'global' -- this fixes the
// tooltips positioning within containers.
pt = evt.currentTarget.parent.contentToGlobal(pt);
customToolTip = ToolTipManager.createToolTip(text, pt.x, pt.y, "errorTipAbove") as ToolTip;
customToolTip.setStyle("borderColor", "#ababab");
// Move tooltip below target and add some padding
var yOffset:int = customToolTip.height + 5;
customToolTip.y -= yOffset;
}
public function showToolTipBelow(evt:MouseEvent, text:String):void
{
var pt:Point = new Point(evt.currentTarget.x, evt.currentTarget.y);
// Convert the targets 'local' coordinates to 'global' -- this fixes the
// tooltips positioning within containers.
pt = evt.currentTarget.parent.contentToGlobal(pt);
customToolTip = ToolTipManager.createToolTip(text, pt.x, pt.y, "errorTipBelow") as ToolTip;
customToolTip.setStyle("borderColor", "ababab");
// Move tooltip below the target
var yOffset:int = evt.currentTarget.height + 5;
customToolTip.y += yOffset;
}
// Remove the tooltip
public function killToolTip():void
{
ToolTipManager.destroyToolTip(customToolTip);
}
[Bindable]
public function get customTooltip():ToolTip { return _customToolTip; }
public function set customTooltip(t:ToolTip):void { _customToolTip = t; }
}
现在,这就是我开始遇到问题的地方......
我正在尝试使用此自定义工具提示,但我不知道如何让按钮栏将其考虑在内。
我创建了一个函数来查看何时可以调用 TooltipsManager 中的函数:
public function showTopToolbarTooltip(e:ToolTipEvent):void{
trace('blabla');
}
但似乎从未考虑到这一点。我已将此函数放入不同按钮栏的事件中:tooltipcreate、tooltipstart、tooltipend,但没有任何反应。没有任何痕迹...
谁能告诉我在哪里调用我的 tooltipManager 的函数?
非常感谢您的帮助。
亲切的问候,
BS_C3
I'm using the tooltipManager as described HERE.
I want to display a custom tooltip for the buttons of a buttonbar.
The buttonbar's declaration is as follow:
<mx:ButtonBar id="topToolbar" height="30" dataProvider="{topToolbarProvider}"
iconField="icon" itemClick="topToolbarHandler(event)"
buttonStyleName="topButtonBarButtonStyle"
toolTipField="tooltip"/>
Until here, everything works fine. I do see the proper text displaying in a tooltip.
Then, I created a custom tooltip manager using the tutorial quoted previously:
public class TooltipsManager
{
private var _customToolTip:ToolTip;
public function TooltipsManager()
{
}
public function showToolTipRight(evt:MouseEvent, text:String):void
{
var pt:Point = new Point(evt.currentTarget.x, evt.currentTarget.y);
// Convert the targets 'local' coordinates to 'global' -- this fixes the
// tooltips positioning within containers.
pt = evt.currentTarget.parent.contentToGlobal(pt);
customToolTip = ToolTipManager.createToolTip(text, pt.x, pt.y, "errorTipRight") as ToolTip;
customToolTip.setStyle("borderColor", "0xababab");
// Move the tooltip to the right of the target
var xOffset:int = evt.currentTarget.width + 5;//(customToolTip.width - evt.currentTarget.width) / 2;
customToolTip.x += xOffset;
}
public function showToolTipAbove(evt:MouseEvent, text:String):void
{
var pt:Point = new Point(evt.currentTarget.x, evt.currentTarget.y);
// Convert the targets 'local' coordinates to 'global' -- this fixes the
// tooltips positioning within containers.
pt = evt.currentTarget.parent.contentToGlobal(pt);
customToolTip = ToolTipManager.createToolTip(text, pt.x, pt.y, "errorTipAbove") as ToolTip;
customToolTip.setStyle("borderColor", "#ababab");
// Move tooltip below target and add some padding
var yOffset:int = customToolTip.height + 5;
customToolTip.y -= yOffset;
}
public function showToolTipBelow(evt:MouseEvent, text:String):void
{
var pt:Point = new Point(evt.currentTarget.x, evt.currentTarget.y);
// Convert the targets 'local' coordinates to 'global' -- this fixes the
// tooltips positioning within containers.
pt = evt.currentTarget.parent.contentToGlobal(pt);
customToolTip = ToolTipManager.createToolTip(text, pt.x, pt.y, "errorTipBelow") as ToolTip;
customToolTip.setStyle("borderColor", "ababab");
// Move tooltip below the target
var yOffset:int = evt.currentTarget.height + 5;
customToolTip.y += yOffset;
}
// Remove the tooltip
public function killToolTip():void
{
ToolTipManager.destroyToolTip(customToolTip);
}
[Bindable]
public function get customTooltip():ToolTip { return _customToolTip; }
public function set customTooltip(t:ToolTip):void { _customToolTip = t; }
}
Now, this is where I start having issues...
I'm trying to get to use this custom tooltip, but I don't know how to get the buttonbar to take it into account.
I created a function to see when could I call the functions in my TooltipsManager:
public function showTopToolbarTooltip(e:ToolTipEvent):void{
trace('blabla');
}
But it would seem that it's never taken into account. I've put this function in different buttonbar's events: tooltipcreate, tooltipstart, tooltipend but nothing happens. Not a single trace...
Could anyone tell me where to call the function of my tooltipManager?
Thanks a lot for your help.
Kind regards,
BS_C3
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
实际上,跳过了教程的一部分 =_= 将函数附加到鼠标悬停/移出事件...对此感到抱歉。
Actually, skipped a part of the tutorial =_= Attaching the functions to the mouseover/out events... Sorry for that.