Peek Not Displaying on iOS

[David]

Hi everyone,

We have a page setup with tiles that use the Peek functionality on mouseover. Peek works fine on desktop browsers we've tested (IE9/Firefox/Chrome) as well as the built in Android browser (long-hold to show Peek, in this case). On the iOS devices (6.1.3) we have tested on, though, Peek isn't occurring at all. We are generating all of our tiles programmatically:

addTextTile = new RadTextTile()
{
    NavigateUrl = "~/NavUrl.aspx"
};

addTextTile.Title.Text = "Tile Title";
addTextTile.BackColor = Color.FromArgb(0, 0xBE, 0x20, 0x26);
addTextTile.Badge.PredefinedType = TileBadgeType.Attention;
addTextTile.Shape = TileShape.Wide;
addTextTile.PeekTemplateSettings.HidePeekTemplateOnMouseOut = true;
addTextTile.PeekTemplateSettings.ShowPeekTemplateOnMouseOver = true;
addTextTile.PeekTemplateSettings.ShowInterval = 0;
addTextTile.PeekContentContainer.ForeColor = Color.Black;
addTextTile.PeekContentContainer.BackColor = Color.White;
addTextTile.PeekContentContainer.BorderColor = Color.FromArgb(0, 0xBE, 0x20, 0x26);
addTextTile.PeekContentContainer.BorderWidth = 5;
addTextTile.PeekContentContainer.Controls.Add(new LiteralControl("<div>Peek stuff goes here.</div>"));

LiveTiles.Add(addTextTile);

Any assistance as to why Peek is not displaying on iOS would be greatly appreciated. Thank you.

[Marin Bratanov]

Hi David,

Having the ShowPeekTemplateOnMouseOver=true  and ShowInterval=0 requires that the mouseover event is fired on the tile element in order to show the peek template. This cannot happen in iPad, however, because there are no mouse events there. While android browsers may raise them, this is not the case with Safari.

What you can consider at this point is handling the click event (OnClientTileClicked), checking if you are under mobile safari (see here for browser checks) and showing the peek template programmatically, then hiding it with the desired timeout (by using the tile's client-side API).


Regards,
Marin Bratanov
Telerik

[David]

Thank you for the guidance, Marin! I've worked around the problem now, employing the following:

JavaScript:

<script type="text/javascript">
    var oldOpenTile = null;

    function OnClientTileClicked(tileList, args) {
        var currentOpenTile = args.get_tile();

        if ($telerik.isMobileSafari == true) {
            if (oldOpenTile != null) {
                oldOpenTile.hidePeekTemplate();
            }
            currentOpenTile.showPeekTemplate();
            oldOpenTile = currentOpenTile;
        }
    }
</script>

CSS for the emptyLinkSpan to navigate when clicking on the div:

span.emptyLinkSpan {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  /* edit: added z-index */
  z-index: 1;

  /* edit: fixes overlap error in IE7/8,
     make sure you have an empty gif */
  background-image: url('empty.gif');
}

C# TileGroup:

<rad:RadTileList ID="TileList" runat="server" TileRows="3" OnClientTileClicked="OnClientTileClicked">
    <Groups>
        <rad:TileGroup>
        </rad:TileGroup>
    </Groups>
</rad:RadTileList>

And my tile generation code:

addTextTile = new RadTextTile()
{
    //Move this url to a span in the div shown on peek so that clicks don't redirect the user.
    //NavigateUrl = "~/NavUrl.aspx"
};

addTextTile.Title.Text = "Tile Title";

NavigateUrl = "NavUrl.aspx";

addTextTile.BackColor = Color.FromArgb(0, 0xBE, 0x20, 0x26);
addTextTile.BorderColor = Color.FromArgb(0, 0xE2, 0x22, 0x27);
addTextTile.Badge.PredefinedType = TileBadgeType.Attention;
addTextTile.Shape = TileShape.Wide;
addTextTile.PeekTemplateSettings.HidePeekTemplateOnMouseOut = true;
addTextTile.PeekTemplateSettings.ShowPeekTemplateOnMouseOver = true;
addTextTile.PeekTemplateSettings.ShowInterval = 0;
addTextTile.PeekTemplateSettings.CloseDelay = 0;
addTextTile.PeekContentContainer.ForeColor = Color.Black;
addTextTile.PeekContentContainer.BackColor = Color.White;
addTextTile.PeekContentContainer.BorderColor = Color.FromArgb(0, 0xBE, 0x20, 0x26);
addTextTile.PeekContentContainer.BorderWidth = 5;
addTextTile.PeekContentContainer.Controls.Add(new LiteralControl("<div style=\"width: 300px; height: 110px; overflow: hidden;\"><a href=\"" + NavigateUrl + "\">Peek stuff goes here<span class=\"emptyLinkSpan\"></span></a></div>"));

TileList.Add(addTextTile);

This causes it to behave as normal across devices. Adjusting the size of the div created on-peek to not cover the title and badge means that a user has to click higher than those areas to navigate, but it is an acceptable tradeoff.

Thanks again for your help.