PDA

View Full Version : Ext.Tooltip - Partially hiding if it goes out of frame



prabhukm
5 Mar 2014, 7:50 AM
In one of my pages, I've to display a tooltip with lots of data. So I decided to go with Ext.Tooltip and its working fine for some cases.
But in some scenarios partial tooltip is hidden if it goes out of frame.


My page layout is something like this, a main page which displays the top level menu's and an iframe. Based on the menu selection the iframe content will be updated.



this.toolTip = new Ext.ToolTip({
title: '<h2> Channel - </h2>',
id: 'content-anchor-tip',
target: 'toolTipDiv',
anchor: 'left',
showDelay: 2000,
html: null,
width: 490,
height: 300,
autoHide: false,
closable: true,
tpl: this.ttipTemplate,
listeners: {
'hide': function (p) {
this.showToolTipWdw = false;
}
,scope: this
}
});



this.ttipTemplate = new Ext.XTemplate(
'<div style="height:10px;width:475px;border-bottom:1px solid #888888;" ></div>',
'<div style="width:475px;">'+
'<div align="right"><a id="Popup.Link" style="color:#2628F6;text-decoration:underline;" href="javascript:alarmStatsTooltip.launchAlarmStatistics();">Channel Realtime and Alarm Details</a><br><br></div>'+
'<div>'+
'{detailsStatus:this.alarmView}'+
'</div>'+
'</div>',
{
addAlarmLogLink : function ( type, alarmtype, eventId, data )
{
var returnObj = '';
if ( data == 2 || data == 6 )
{
returnObj = ' onclick=javascript:alarmStatsTooltip.launchQoSOrQoEAlarmLog('+eventId+',\''+alarmtype+'\',\''+type+'\'); ';
}
return returnObj;
},

alarmView : function(data, parent)
{
this.statusColorMap = {0:'ltgySm', 1:'#55DD88', 6:'#FF9933', 5:'#000000', 2:'#E10000', 3:'#FFDD33', 4:'dkgySm', 7:'greySm'};



var htmlContent = '<table border="0" cellpadding="1" cellspacing="3" width="100%">'+
'<tr>'+
'<td class="pageHdr1"><u>Video Alarms</u> </td>'+
'<td class="pageHdr1"><u>Audio Alarms</u> </td>'+
'</tr>'+
'<tr>'+
'<td width="45%" valign="top">'+
'<table border="0" cellpadding="1" cellspacing="3" width="100%">'+
'<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">MLS-LP</td>'+
'<td width="30px" id="Popup.Video_Alarms.MLS-LP.Color" style="background:'+this.statusColorMap[parent.vMlslpStatus]+'" '+this.addAlarmLogLink('Video', 'QoS', Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[VIDEO_MLS_LP], parent.vMlslpStatus)+'></td>'+
'</tr>'+
'<tr class="IQEvenRow">'+
'<td width="150px" class="regBoldText" style="font-size:11px">MLS-15</td>'+
'<td id="Popup.Video_Alarms.MLS-15.Color" style="background:'+this.statusColorMap[parent.vMls15Status]+'" '+this.addAlarmLogLink('Video', 'QoS', Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[VIDEO_MLS_15], parent.vMls15Status)+'></td>'+
'</tr>'+
'<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">Max BitRate</td>'+
'<td id="Popup.Video_Alarms.Max_BR.Color" style="background:'+this.statusColorMap[parent.vMaxBrStatus]+'" '+this.addAlarmLogLink('Video', 'QoS', Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[VIDEO_MAX_BITRATE], parent.vMaxBrStatus)+'></td>'+
'</tr>'+
'<tr class="IQEvenRow">'+
'<td width="150px" class="regBoldText" style="font-size:11px">Min BinRate</td>'+
'<td id="Popup.Video_Alarms.Min_BR.Color" style="background:'+this.statusColorMap[parent.vMinBrStatus]+'" '+this.addAlarmLogLink('Video', 'QoS', Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[VIDEO_MIN_BITRATE], parent.vMinBrStatus)+'></td>'+
'</tr>'+
'<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">Outage</td>'+
'<td id="Popup.Video_Alarms.Outage.Color" style="background:'+this.statusColorMap[parent.vOutageStatus]+'" '+this.addAlarmLogLink('Video', 'QoS', Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[VIDEO_OUTAGE], parent.vOutageStatus)+'></td>'+
'</tr>';
if ( (featureBitMap & Iq.profiles.FEATURE_QoE) == Iq.profiles.FEATURE_QoE ) {

htmlContent += '<tr class="IQEvenRow">'+
'<td width="150px" class="regBoldText" style="font-size:11px">FES-LP</td>'+
'<td id="Popup.Video_Alarms.FES-LP.Color" style="background:'+this.statusColorMap[parent.fesLPStatus]+'" '+this.addAlarmLogLink('Video', 'QoE', Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[FES_LP], parent.fesLPStatus)+'></td>'+
'</tr>'+
'<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">FES-15</td>'+
'<td id="Popup.Video_Alarms.FES-15.Color" style="background:'+this.statusColorMap[parent.fes15Status]+'" '+this.addAlarmLogLink('Video', 'QoE',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[FES_15], parent.fes15Status)+'></td>'+
'</tr>'+
'<tr class="IQEvenRow">'+
'<td width="150px" class="regBoldText" style="font-size:11px">Black Screen</td>'+
'<td id="Popup.Video_Alarms.Black_Screen.Color" style="background:'+this.statusColorMap[parent.blackStatus]+'" '+this.addAlarmLogLink('Video', 'QoE',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[BLACK_SCREEN], parent.blackStatus)+'></td>'+
'</tr>'+
'<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">Still Frame</td>'+
'<td id="Popup.Video_Alarms.Still_Frame.Color" style="background:'+this.statusColorMap[parent.stillStatus]+'" '+this.addAlarmLogLink('Video', 'QoE',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[STILL_SCREEN], parent.stillStatus)+'></td>'+
'</tr>'+
'<tr class="IQEvenRow">'+
'<td width="150px" class="regBoldText" style="font-size:11px">'+parent.mosvDisplayName+'</td>'+
'<td id="Popup.Video_Alarms.MOS-V.Color" style="background:'+this.statusColorMap[parent.mosvStatus]+'" '+this.addAlarmLogLink('Video', 'QoE',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[MOS_V], parent.mosvStatus)+'></td>'+
'</tr>'+
'<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">Closed Caption</td>'+
'<td id="Popup.Video_Alarms.Closed_Caption.Color" style="background:'+this.statusColorMap[parent.closedCaptionStatus]+'" '+this.addAlarmLogLink('Video', 'QoE',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[CLOSED_CAPTION], parent.closedCaptionStatus)+'></td>'+
'</tr>'+
'<tr class="IQEvenRow">'+
'<td width="150px" class="regBoldText" style="font-size:11px">GOP</td>'+
'<td id="Popup.Video_Alarms.GOP.Color" style="background:'+this.statusColorMap[parent.gopStatus]+'" '+this.addAlarmLogLink('Video', 'QoE',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[GOP_LENGTH], parent.gopStatus)+'></td>'+
'</tr>';
}
htmlContent += '<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">Scrambled</td>'+
'<td id="Popup.Video_Alarms.Scrambled.Color" style="background:'+this.statusColorMap[parent.scrambledStatus]+'" ></td>'+
'</tr>' +
'<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">&nbsp;</td>'+
'<td ></td>'+
'</tr>'+
'</table>'+
'</td>'+
'<td width="55%" valign="top">'+
'<table border="0" cellpadding="1" cellspacing="3" width="100%">'+
'<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">MLS-LP</td>'+
'<td width="30px" id="Popup.Audio_Alarms.MLS-LP.Color" style="background:'+this.statusColorMap[parent.aMlslpStatus]+'" '+this.addAlarmLogLink('Audio', 'QoS',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[AUDIO_MLS_LP], parent.aMlslpStatus)+'></td>'+
'</tr>'+
'<tr class="IQEvenRow">'+
'<td width="150px" class="regBoldText" style="font-size:11px">MLS-15</td>'+
'<td id="Popup.Audio_Alarms.MLS-15.Color" style="background:'+this.statusColorMap[parent.aMls15Status]+'" '+this.addAlarmLogLink('Audio', 'QoS',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[AUDIO_MLS_15], parent.aMls15Status)+'></td>'+
'</tr>'+
'<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">Max BitRate</td>'+
'<td id="Popup.Audio_Alarms.Max_BR.Color" style="background:'+this.statusColorMap[parent.aMaxBrStatus]+'" '+this.addAlarmLogLink('Audio', 'QoS',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[AUDIO_MAX_BITRATE], parent.aMaxBrStatus)+'></td>'+
'</tr>'+
'<tr class="IQEvenRow">'+
'<td width="150px" class="regBoldText" style="font-size:11px">Min BitRate</td>'+
'<td id="Popup.Audio_Alarms.Min_BR.Color" style="background:'+this.statusColorMap[parent.aMinBrStatus]+'" '+this.addAlarmLogLink('Audio', 'QoS',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[AUDIO_MIN_BITRATE], parent.aMinBrStatus)+'></td>'+
'</tr>'+
'<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">Outage</td>'+
'<td id="Popup.Audio_Alarms.Outage.Color" style="background:'+this.statusColorMap[parent.aOutageStatus]+'" '+this.addAlarmLogLink('Audio', 'QoS',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[AUDIO_OUTAGE], parent.aOutageStatus)+'></td>'+
'</tr>';
if ( (featureBitMap & Iq.profiles.FEATURE_QoE) == Iq.profiles.FEATURE_QoE ) {

htmlContent += '<tr class="IQEvenRow">'+
'<td width="150px" class="regBoldText" style="font-size:11px">Loudness Max</td>'+
'<td id="Popup.Audio_Alarms.Loudness_Max.Color" style="background:'+this.statusColorMap[parent.maxLoudStatus]+'" '+this.addAlarmLogLink('Audio', 'QoE',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[AUDIO_LOUDNESS_MAX], parent.maxLoudStatus)+'></td>'+
'</tr>'+
'<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">Loudness Min</td>'+
'<td id="Popup.Audio_Alarms.Loudness_Min.Color" style="background:'+this.statusColorMap[parent.minLoudStatus]+'" '+this.addAlarmLogLink('Audio', 'QoE',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[AUDIO_LOUDNESS_MIN], parent.minLoudStatus)+'></td>'+
'</tr>'+
'<tr class="IQEvenRow">'+
'<td width="150px" class="regBoldText" style="font-size:11px">Dialnorm Max</td>'+
'<td id="Popup.Audio_Alarms.Dialnorm_Max.Color" style="background:'+this.statusColorMap[parent.maxDNStatus]+'" '+this.addAlarmLogLink('Audio', 'QoE',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[DIALNORM_MAX], parent.maxDNStatus)+'></td>'+
'</tr>'+
'<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">Dialnorm Min</td>'+
'<td id="Popup.Audio_Alarms.Dialnorm_Min.Color" style="background:'+this.statusColorMap[parent.minDNStatus]+'" '+this.addAlarmLogLink('Audio', 'QoE',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[DIALNORM_MIN], parent.minDNStatus)+'></td>'+
'</tr>'+
'<tr class="IQEvenRow">'+
'<td width="150px" class="regBoldText" style="font-size:11px">MOS-A</td>'+
'<td id="Popup.Audio_Alarms.MOS-A.Color" style="background:'+this.statusColorMap[parent.mosaStatus]+'" '+this.addAlarmLogLink('Audio', 'QoE',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[MOS_A], parent.mosaStatus)+'></td>'+
'</tr>'+
'<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">L - D Variation (High)</td>'+
'<td id="Popup.Audio_Alarms.L_-_D_Variation_High.Color" style="background:'+this.statusColorMap[parent.dnVsLoudVarHStatus]+'" '+this.addAlarmLogLink('Audio', 'QoE',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[AUDIO_LD_DN_VARIATION_HIGH], parent.dnVsLoudVarHStatus)+'></td>'+
'</tr>'+
'<tr class="IQEvenRow">'+
'<td width="150px" class="regBoldText" style="font-size:11px">L - D Variation (Low)</td>'+
'<td id="Popup.Audio_Alarms.L_-_D_Variation_Low.Color" style="background:'+this.statusColorMap[parent.dnVsLoudVarLStatus]+'" '+this.addAlarmLogLink('Audio', 'QoE',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[AUDIO_LD_DN_VARIATION], parent.dnVsLoudVarLStatus)+'></td>'+
'</tr>'+
'<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">Silence</td>'+
'<td id="Popup.Audio_Alarms.Silence.Color" style="background:'+this.statusColorMap[parent.silenceStatus]+'" '+this.addAlarmLogLink('Audio', 'QoE',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[AUDIO_SILENCE], parent.silenceStatus)+'></td>'+
'</tr>';
if ((licensedBitMap & Iq.profiles.LICENSED_FOR_NIELSEN) == Iq.profiles.LICENSED_FOR_NIELSEN) {

htmlContent + = '<tr class="IQEvenRow">'+
'<td width="150px" class="regBoldText" style="font-size:11px">NAES II (N2)</td>'+
'<td id="Popup.Audio_Alarms.NWNAESII.Color" style="background:'+this.statusColorMap[parent.nwN2Status]+'" '+this.addAlarmLogLink('Audio', 'QoE',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[NW_N2], parent.nwN2Status)+'></td>'+
'</tr>'+
'<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">NAES II HF (N2HF)</td>'+
'<td id="Popup.Audio_Alarms.NWNAESIIHF.Color" style="background:'+this.statusColorMap[parent.nwHFStatus]+'" '+this.addAlarmLogLink('Audio', 'QoE',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[NW_HI_FREQ], parent.nwHFStatus)+'></td>'+
'</tr>'+
'<tr class="IQEvenRow">'+
'<td width="150px" class="regBoldText" style="font-size:11px">Nielsen Watermark (NW)</td>'+
'<td id="Popup.Audio_Alarms.NWTAMCODE.Color" style="background:'+this.statusColorMap[parent.nwTAMCodeStatus]+'" '+this.addAlarmLogLink('Audio', 'QoE',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[NW_TAM_CODE], parent.nwTAMCodeStatus)+'></td>'+
'</tr>'+
'<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">NW Commercial Code (NWCC)</td>'+
'<td id="Popup.Audio_Alarms.NWCCI.Color" style="background:'+this.statusColorMap[parent.nwCCStatus]+'" '+this.addAlarmLogLink('Audio', 'QoE',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[NW_COMM_CODE], parent.nwCCStatus)+'></td>'+
'</tr>';
}
}
htmlContent += '</table>'+
'</td>'+
'</tr>'+
'<tr>'+
'<td class="pageHdr1"><u>Control Alarms</u> </td>'+
'<td class="pageHdr1"><u>User Specified PID Alarms</u> </td>'+
'</tr>'+
'<tr>'+
'<td>'+
'<table border="0" cellpadding="1" cellspacing="3" width="100%">'+
'<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">MLS-LP</td>'+
'<td width="30px" id="Popup.Control_Alarms.MLS-LP.Color" style="background:'+this.statusColorMap[parent.cMlslpStatus]+'" '+this.addAlarmLogLink('Control', 'QoS',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[CONTROL_MLS_LP], parent.cMlslpStatus)+'></td>'+
'</tr>'+
'<tr class="IQEvenRow">'+
'<td width="150px" class="regBoldText" style="font-size:11px">MLS-15</td>'+
'<td id="Popup.Control_Alarms.MLS-15.Color" style="background:'+this.statusColorMap[parent.cMls15Status]+'" '+this.addAlarmLogLink('Control', 'QoS',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[CONTROL_MLS_15], parent.cMls15Status)+'></td>'+
'</tr>'+
'<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">Outage</td>'+
'<td id="Popup.Control_Alarms.Outage.Color" style="background:'+this.statusColorMap[parent.cOutageStatus]+'" '+this.addAlarmLogLink('Control', 'QoS',Iq.realtime.ProgramDetails.DVAEventTypeId.AttributeNameMap[CONTROL_OUTAGE], parent.cOutageStatus)+'></td>'+
'</tr>'+
'</table>'+
'</td>'+
'<td valign="top">'+
'<table border="0" cellpadding="1" cellspacing="3" width="100%">'+
'<tr>'+
'<td width="150px" class="regBoldText" style="font-size:11px">PID Status</td>'+
'<td width="30px" id="Popup.Other_Alarms.PID_Status.Color" style="background:'+this.statusColorMap[parent.PIDStatus]+'" ext:qtip="'+parent.PIDStatusText+'"></td>'+
'</tr>'+
'</table>'+
'</td>'+
'</tr>'+
'</table>';

return htmlContent;
}
}
);


ExtJS Version : 3.2.1

I've searched around the forums, but couldn't get any help. Your help will be highly appreciated.

prabhukm
5 Mar 2014, 8:09 AM
.