iPhone 'add as app' tooltip

Shows a tooltip to a user the first time they visit on an iPhone, prompting them to tap the middle nav button and "add to Home Screen".

by igos

HTML

<body style="background-color: #ddd;">
    <p style="text-align:center;margin: 1em 2em;">This is the test document body.</p>
<body>

CSS

html, body { margin: 0; padding: 0; font: 14px helvetica, arial, sans-serif; }
    #ios-arrow { z-index: 99999999; width: 60%; display: none; height: auto; border: 5px solid #333; background: #ccc; position: absolute; bottom: 5em; left: 13%; -webkit-border-radius: 6px; border-radius: 6px; margin: 0; padding: 1em 1em; text-align: center; line-height: 1.6em; cursor: pointer; zoom: 1; }
    #ios-arrow strong { font-size: 120%; display: block; border-bottom: 1px solid black; margin-bottom: 0.5em; padding-bottom: 0.25em; }
    #ios-arrow::before {content: "";position: absolute;bottom: -20px;left: 50%;margin-left: -17px; border-width: 20px 20px 0;border-style: solid;border-color: #333 transparent;display: block;width: 0;}
    #ios-arrow::after {content: "";position: absolute;bottom: -13px;left: 50%; margin-left: -10px; border-width: 13px 13px 0;border-style: solid;border-color: #ccc transparent;display: block;width: 0;}

JavaScript

function setCookie(c_name,value,exdays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
}
  
function getCookie(c_name){
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++){
        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
        y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
        x=x.replace(/^\s+|\s+$/g,"");
        if (x==c_name){
                return unescape(y);
        }
    }
}
  
$(document).ready(function(){
    if (navigator.userAgent.indexOf('iPhone') !== -1) {
        var ios = getCookie("ios");
        if(!ios){
            $('<div id="ios-arrow"><strong>Add this as an app</strong>Tap the button below, then <br />select "Add to Home Screen".</div>').delay(500).appendTo("body").animate({ opacity: 'toggle', bottom: '1.2em' }, 600).delay(4000).fadeOut();
            setCookie("ios","true",365);
            $("#ios-arrow").live("click", function(){
                $("#ios-arrow").hide();
            })
        }
    }
});