I didn't originally find that
Stackoverflow thread. Very interesting solution.
Appreciate the suggestion for re-showing the tooltips. It is so smooth now, looks great. Thank you very much for polishing this up.
Question: One last minor question would be when I move the mouse over the image (layer) the tooltip is shown. If I then click on the image the tooltip disappears. Is there a way to cancel the mouse click to stop the tooltip from hiding?
Final code example, implementing your suggestions. Hope this helps someone else.
Associated Images: 
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<script runat="server">
public class MyImage
{
public string Filename { get; set; }
public string Title { get; set; }
public string Credit { get; set; }
public string Caption { get; set; }
public DateTime DateAdded { get; set; }
public Boolean Active { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
List<MyImage> images = GetImages();
int imageIndex = 0;
foreach (MyImage myImage in images)
{
imageIndex++;
String imageUrl = String.Format("images/{0}", myImage.Filename);
String id = String.Format("Image{0}", imageIndex);
Ext.Net.Image img = new Ext.Net.Image
{
ID = id,
ImageUrl = imageUrl,
Tag = imageIndex,
Width = 480
};
String lId = String.Format("Layer{0}", imageIndex);
Container ctnr = new Container
{
ID = lId,
// Add background-color: red; opacity: 0.2; filter:Alpha(opacity=20); to style below to see the filmLayer.
// IE9 and belows require the background-color and filter:Alpha(opacity=0) to show a tooltip or it could be a z-index issue.
StyleSpec = "position: absolute; z-index: 20000; background-color: red; opacity: 0.0; filter:Alpha(opacity=0);",
CustomConfig = { new ConfigItem { Name = "layerTargetID", Value = id, Mode = ParameterMode.Value } },
Listeners = { AfterLayout = { Fn = "ApplyPanel" } }
};
if (imageIndex > 1) ctnr.Hidden = true;
string caption = String.Format("<span style='float: right'><i>{1}</i></span><b>{0}</b><hr/>{2}", myImage.Title, myImage.Credit, myImage.Caption);
String tId = String.Format("ToolTip{0}", imageIndex);
ToolTip tt = new ToolTip
{
ID = tId,
MaxWidth = 479,
Width = 479,
DismissDelay = 0,
Html = caption,
BaseCls = "imageTooltip",
BodyCls = "imageTooltipBody",
CustomConfig = { new ConfigItem { Name = "getTargetXY", Value = "getConstrainedTipXY", Mode = ParameterMode.Raw } }
};
ctnr.ToolTips.Add(tt);
ImageCarousel.Items.Add(img);
ImageCarousel.ContentControls.Add(ctnr);
};
}
private List<MyImage> GetImages()
{
List<MyImage> data = new List<MyImage>();
data.Add(new MyImage { Filename = "car03.jpg", Title = "BLUE COLD", Credit = "2010 Ford Mustang At SEMA 2009", Caption = "Blah", DateAdded = DateTime.Parse("2015-01-01"), Active = true });
data.Add(new MyImage { Filename = "car01.jpg", Title = "RED HOT", Credit = "Photo taken from niceartpaperz.com", Caption = "Blah", DateAdded = DateTime.Parse("2015-01-01"), Active = true });
return data;
}
</script>
<head runat="server">
<title></title>
<script type="text/javascript">
var getConstrainedTipXY = function () {
//imageDom = this.target.dom;
//tooltipDom = this.el.dom;
//coordX = imageDom.clientLeft;
//coordY = imageDom.clientTop + imageDom.clientHeight - (tooltipDom.clientTop + tooltipDom.clientHeight)
//return [coordX, coordY];
var me = this,
offsets, xy, dh, dw, de, bd, scrollX, scrollY, axy, sz;
imageDom = me.target.dom;
tooltipDom = this.el.dom;
xy = me.getAlignToXY(me.target, 'tl-bl');
dw = Ext.Element.getViewWidth() - 5;
dh = Ext.Element.getViewHeight() - 5;
de = document.documentElement;
bd = document.body;
scrollX = (de.scrollLeft || bd.scrollLeft || 0) + 5;
scrollY = (de.scrollTop || bd.scrollTop || 0) + 5; tooltipSz = me.getSize();
if (xy[1] - tooltipSz.height > dh)
return [xy[0], xy[1] - imageDom.clientHeight];
else
return [xy[0], xy[1] - (tooltipDom.clientTop + tooltipDom.clientHeight)];
};
var ApplyPanel = function (layer) {
var target = Ext.getCmp(layer.layerTargetID);
var targetDom = target.el.dom;
var myDom = layer.el.dom;
myDom.style.top = targetDom.clientTop + "px";
myDom.style.left = targetDom.clientLeft + "px";
myDom.style.width = targetDom.clientWidth + "px";
myDom.style.height = targetDom.clientHeight + "px";
};
Ext.define("MyOverrides", {
override: "Ext.layout.CardLayout",
nextImage: function () {
var oldCard = this.activeItem,
oldFilmLayer = Ext.getCmp("Layer" + oldCard.tag),
oldToolTip = Ext.getCmp("ToolTip" + oldCard.tag);
reshowToolTip = oldToolTip.isVisible();
oldFilmLayer.hide();
var newCard = this.activeItem.next() || this.owner.items.getAt(0),
newFilmLayer = Ext.getCmp("Layer" + newCard.tag);
this.setActiveItem(newCard);
newFilmLayer.show();
newCard.updateLayout();
if (reshowToolTip) {
oldToolTip.hide();
Ext.getCmp("ToolTip" + newCard.tag).show();
}
}
});
</script>
<style>
.imageTooltip {
background-color: #000000;
opacity: 0.80;
filter: Alpha(opacity=80);
}
.imageTooltipBody {
padding: 5px 7px 5px 7px;
font-size: 11px;
color: #FFFFFF;
}
.x-ie7 .imageTooltip table.x-table-plain {
width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" ScriptMode="Debug" SourceFormatting="true" />
<ext:Panel runat="server" Layout="HBoxLayout" Width="600">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" DefaultMargins="3" />
</LayoutConfig>
<Items>
<ext:Panel runat="server" Html="Filler" Flex="1" />
<ext:Panel ID="ImageCarousel" runat="server" Width="480" Height="294" Layout="CardLayout">
<Bin>
<ext:TaskManager ID="ImageCarouselTaskManager" runat="server" ClientIDMode="Static"
AutoRunDelay="4000">
<Tasks>
<ext:Task TaskID="ImageCarouselTask" Interval="4000" AutoRun="true">
<Listeners>
<Update Handler="App.ImageCarousel.layout.nextImage();" />
</Listeners>
</ext:Task>
</Tasks>
</ext:TaskManager>
</Bin>
</ext:Panel>
</Items>
</ext:Panel>
</form>
</body>
</html>
Posting Permissions
| Frameworks and Tools for .NET Developers