Hi all.
I have a panel on the left side of my layout that uses contentEl to fill the panel with this:
Code:
<div id='recentItems'>
<ul class='iconlist'>
<li class='eventList'><a href=''>call from A.Keys</a></li>
<li class='todoList'><a href=''>Submit</a></li>
<li class='contactList'><a href=''>test item</a></li>
</ul>
</div>
My problem is when I try to add ToolTip programatically to these links. My goal is to have a tooltip display to the right of each of these links but since the links may vary in width, I'd like the tooltips for each link to display at the same X coordinate that just to the right of the entire <ul>. Programatically here's how I'm creating the tooltips:
Code:
function SetQuickTips() {
var items = Ext.DomQuery.select('div[id=recentItems] ul li');
Ext.each(items, function(item) {
ee = Ext.get(item);
new Ext.ToolTip({
//I expect the next three properties to anchor my
//my tooltip to the <li> but it's not. It's behaving
//as if anchorToTarget=false.
anchorToTarget: true,
target: ee,
defaultAlign: 'tr-tl',
width: 200,
border: false,
bodyBorder: false,
bodyStyle: 'background-color: white;',
html: '<h2>Job</h2>Title: Director IT<br>Created: Mon 7/1/10<br>Interest: High (9)<br>Status: Submitted',
showDelay: 10
});
}, this);
}
}
I realize that this code won't accomplish my final goal but this isn't even behaving as I'd expect so I can't move forward. I would expect that the top of my tooltip would at least match the top of the <li> item that I'm linking it to. The problem is that the tooltip instead seems to be aligning to my mouse and ignoring the target completely.
I tried stepping through the Ext code and I do notice that in the Ext.ToolTip getTargetXY() method the tooltip object is missing an anchor property that seems to be key to triggering all the xy coordinate logic.
Any ideas?
Thanks