Monday, January 3, 2011

Flex text mouse over tooltip dynamic for a part of text

Well, i had to develop custom functionality which has to give the mouse over tooltip on a part of text in a text field dynamically.

Could not find direct solution for this, but after my research got the solution.


Main application code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle" layout="vertical"
xmlns:local="*" creationComplete="setText();">
<mx:Script>
<![CDATA[
private function setText():void
{
myText.htmlText = "'<i>Lorem Ipsum</i>' is simply dummy text of the '<b>printing</b>' and typesetting industry."
}

import mx.managers.ToolTipManager;
import mx.controls.ToolTip;

public var myToolTip:ToolTip;

public var isTooltip:Boolean = new Boolean(false);

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);
isTooltip = true;
myToolTip = ToolTipManager.createToolTip(text, pt.x, pt.y, "errorTipAbove") as ToolTip;

myToolTip.setStyle("borderColor", "#ff6600");
myToolTip.setStyle("color", "white");
myToolTip.setStyle("fontSize","10");

// Move tooltip below target and add some padding
var yOffset:int = myToolTip.height + 5;
myToolTip.y = evt.stageY - yOffset;
myToolTip.x = evt.stageX;
}

public function killToolTip():void
{
if(isTooltip) {
ToolTipManager.destroyToolTip(myToolTip);
isTooltip = false;
}
}

]]>
</mx:Script>
<local:MyText id="myText" htmlText="" mouseOut="killToolTip()" />

<mx:Label id="labelID"/>

<mx:Label id="htmlID"/>
</mx:Application>


Create MyText mxml component with the following code.

<?xml version="1.0" encoding="utf-8"?>
<mx:Text xmlns:mx="http://www.adobe.com/2006/mxml" mouseMove="onMouseMove(event)">
<mx:Script>
<![CDATA[
import mx.core.Application;
import mx.controls.Alert;
import mx.managers.ToolTipManager;
import mx.controls.ToolTip;

// Saved word start and end indexes
private var wordStartIndex:int = -1;
private var wordEndIndex:int = -1;

private function onMouseMove(event:MouseEvent):void
{
if(Application.application.isTooltip) {
Application.application.killToolTip();
}

var charIndexUnderMouse:int = textField.getCharIndexAtPoint(event.localX, event.localY);
wordStartIndex = charIndexUnderMouse;
wordEndIndex = charIndexUnderMouse;

Application.application.labelID.text = charIndexUnderMouse..toString();
// Find start of word
while (text.charAt(wordStartIndex) != "'" && wordStartIndex > 0)
{
wordStartIndex--;
}

// Find end of word
while (text.charAt(wordEndIndex) != "'" && wordEndIndex < text.length)
{
wordEndIndex++;
}

if(text.substring(wordStartIndex+1,wordEndIndex) == "Lorem Ipsum") {
Application.application.showToolTipAbove(event,text.substring(wordStartIndex+1,wordEndIndex));
}
}

private function onMouseOut():void
{
Application.application.killToolTip();
}
]]>
</mx:Script>
</mx:Text>

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...