n00b0101
asked on
Need help customizing YUI tool
I really like the tool found here: http://developer.yahoo.com/yui/examples/container/panelskin1_clean.html
but there are a couple of changes I'd like to make, although, I can't figure out how to add it in there, and there doesn't seem to be any information in the forums.
I want the window to popup *beside* the link, instead of over it, and I want the link to be aligned to the vertical middle of the tooltip. Does anyone know (or are even familiar enough with YUI) to explain how to do this, or even if it's possible? Thanks!
but there are a couple of changes I'd like to make, although, I can't figure out how to add it in there, and there doesn't seem to be any information in the forums.
I want the window to popup *beside* the link, instead of over it, and I want the link to be aligned to the vertical middle of the tooltip. Does anyone know (or are even familiar enough with YUI) to explain how to do this, or even if it's possible? Thanks!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I'm trying to do a similar job in YUI but with Tooltips. Below is a snippet of my code. Any element with hoversymbol class displays a tooltip. I have failed to place the tooltip("tl","tr") by using the positioning configurationas you can see in my code.
// Symbol cells should have the class "hoversymbol".
// Needs the following libraries
// css/container.css
// js/yui/yahoo-dom-event.js
// js/yui/container.js
// js/yui/element-beta.js
var overlay;
var storedSymbolInfo = {
ADP : {name: 'AUTOMATIC DATA PROC', price: 45.17, change: 0.86, percent: 1.87 },
BR : {name: 'BROADRIDGE FINANCIAL', price: 22.35, change: 0.19, percent: 8.51 },
MSFT : {name: 'MICROSOFT', price: 34.76, change: 0.04, percent: 0.12 }
}
var toolTip;
function init() {
var symbolCells = YAHOO.util.Dom.getElements
overlay = new YAHOO.widget.Overlay("myOv
toolTip = new YAHOO.widget.Tooltip("myTo
visible:false,
width:"175px",
hidedelay:300,
constraintoviewport:true})
toolTip.align("tl","tr");
toolTip.contextTriggerEven
function(type, args){
console.log("showSymbolInf
var context = args[0];
var cellElement = new YAHOO.util.Element(context
if (displayedInfo && displayedInfo.symbolCell != cellElement) {
displayedInfo.symbolCell.r
}
displayedInfo.symbolCell = cellElement;
context.addClass('hoversym
context.align();
context.render();
});
toolTip.contextMouseOverEv
function(type,args){
console.log("tool tip mouseover event");
//this.cfg.setProperty("hi
displaySymbolInfo(args[0])
}
);
toolTip.contextMouseOutEve
function(type, args){
console.log("tooltip mouseout event");
}
);
YAHOO.util.Event.addListen
YAHOO.util.Event.addListen
console.log("init completed");
}
function hideTooltip(e){
console.log("mouseout tooltip");
toolTip.cfg.setProperty("h
}
function extendTooltipLife(e){
console.log("mouseover tooltip");
toolTip.cfg.setProperty("h
}
function displaySymbolInfo(theCell)
console.log("displaySymbol
var cellElement = new YAHOO.util.Element(theCell
if(displayedInfo && displayedInfo.symbolCell != cellElement){
displayedInfo.symbolCell.r
}
var symbol = cellElement.getElementsByT
var companyName;
var headerString
var symbolInfo = storedSymbolInfo[symbol];
if (storedSymbolInfo[symbol])
headerString = '<table border="0" width="100%"><tr><td align="center">';
headerString += symbolInfo.price + '</td><td align="center" class="positive">+';
headerString += symbolInfo.change + '</td><td align="center" class="positive">';
headerString += symbolInfo.percent + '%</td></tr></table>';
companyName = " <b>" + symbolInfo.name + "</b><br>";
}
var chartNav = '<div class="chartbar"><div class="chartoption selected">1d</div><div class="chartoption">5d</di
chartNav += '<div class="chartoption">3m</di
chartNav += '<div class="chartoption">2y</di
text = headerString+companyName + "<img src='https://app.quotemedia.com/quotetools/getChart.go?webmasterId=501&chtype=LineChart&symbol="+symbol+"&chmrg=3&ch
'<span class="chartlinks"> N
toolTip.symbolCell = cellElement;
//overlay.render(document.
displayedInfo = toolTip;
toolTip.symbolCell.addClas
toolTip.cfg.setProperty("t
//overlay.align();
//overlay.show();
//YAHOO.util.Event.addList
//YAHOO.util.Event.addList
}
/*
function showSymbolInfo(e, theOverlay) {
console.log("showSymbolInf
if (displayedInfo && displayedInfo != theOverlay) {
displayedInfo.symbolCell.r
}
displayedInfo = theOverlay;
theOverlay.symbolCell.addC
theOverlay.align();
theOverlay.show();
clearTimeout(displayedInfo
}
*/
function timeoutSymbolInfo(e, theOverlay) {
console.log("timeoutSymbol
if (displayedInfo && displayedInfo != theOverlay) {
displayedInfo.symbolCell.r
}else{
clearTimeout(displayedInfo
displayedInfo.pause = setTimeout(hideDetails,300
}
}
function hideDetails() {
displayedInfo.hide();
displayedInfo.symbolCell.r
}
var displayedInfo;
YAHOO.util.Event.addListen
HTML code:
<div class="pagecontainer yui-skin-sam">
<div class="pagecontents">
<br>
<form name="AccountActivityForm"
<table border="0" cellpadding="1" cellspacing="0">
<tr class="columnheadings">
<th align="left" id="column-symbol">
<span class="labeldark"><a href="" onclick="return false;">Symbol</a></span>
</th>
</tr>
<tr class="rowshade_odd">
<td align="left" class="hoversymbol column-symbol Stock_US" nowrap>
<a href="#" class="Stock_US">ADP</a>
</td>
</tr>
<tr class="rowshade_even">
<td align="left" class="hoversymbol column-symbol Stock_US" nowrap>
<a href="#" class="Stock_US">BR</a>
</td>
</tr>
<tr class="rowshade_odd">
<td align="left" class="hoversymbol column-symbol Stock_US" nowrap>
<a href="#" class="Stock_US">MSFT</a>
</td>
</tr>
</table>
</div>
</div>