The User Maldito's Website

With the attribute tittle you can put an "altenative text".

<span title="WWW stands for World Wide Web">What is "WWW"?<span>
                            

With style, we can make it unique and easy to spot to the users.

a[title]{
    color: red;
    cursor: alias;
}
*[title]:not(a[title]){
    color: lightgreen;
    text-decoration: underline solid 3px pink;
    &:hover{
        color: lightblue;
        text-decoration: none;
    }
}
                            

With JavaScript, we can do something like: "If you see a Mobile User, let's do this: If the user double tap a hovered thing, show it as a popup." .

I'll reccommend to, first, understand the code and then copy-paste the code. Anyways, now it's time to explain the code.

Step 1. Declare the time between touch (double-click/double-touch/double-tap = deltaTouch).

Step 2: Get all the hovered thing

var deltaTouch;

//Search, in my HTML, all the attributes with the name: "title"
let hoveredList = document.querySelectorAll("[title]");
                            

Step 3: See if the User is Mobile or not

Step 4: If true, put an event saying: "If someone touch one of the hovered things, check if the user DO the double-tap.".

//Searching in all the hovered things
abreviationList.forEach(abbr => {
            //Event saying: "if you detect a tap, check for a double-tap"
            abbr.addEventListener("touchstart", function(e){
                let doubleTap = isDoubleTap(e);
                //If it's a double-tap, show the content as a popup
                if (doubleTap) {
                    e.preventDefault();
                    ShowAbbreviation(abbr);
                }
            })
        });


// -- The functions --
function isDoubleTap(e) {
    const maxTime = 700; //Time between taps
    let doubleTapDetected = false;
    let touch = e.touches.length;

    //Tap Detected?
    if (touch === 1) {
        //If has no value, I will put one (Tap-1)
        if (!deltaTouch) {
            deltaTouch = e.timeStamp + maxTime;
        }
        else{ 
            let isNotExpired = (e.timeStamp <= deltaTouch);
            //(Tap-2) Is short enough to detect it as a double tap?
            if (isNotExpired) {
                //Answer: Yes -> Reset the timer and say that we detected a Double-Tap
                e.preventDefault();
                deltaTouch = null;
                console.log("Double Tap detected!");
                doubleTapDetected = true;
            }
            else{
                //Answer: No -> Keep searching for another tap
                deltaTouch = e.timeStamp + maxTime;
            }
        }
    }

    return doubleTapDetected;
}

function ShowAbbreviation(abbr){
    alert(abbr.title);
}
                            

Make sure you have a similar HTML structure. The ID are important.

<article id="stats">
    <p id="views">
        My Views: XXX XXX
    </p>
    <p id="created">
        First Upload: DD-MM-AAAA
    </p>
    <p id="updated">
        Last Updated: DD-MM-AAAA
    </p>
</article>
                            

You ONLY have to CHANGE:

//1. Your name
const username = "dapoyo";
                                

//2. The View Selector
//Example: views = 12.345.678 or 13.579
const viewSelector = 1;
const separator = ',';
//Output: 12,345,678 views or 13,579 views
                                

    //3. Created date
    createdType = -1;
    //Output: nothing
    createdType = 2;
    //Output: 34 week(s) ago

    4. Updated date
    const updatedType = 0;
    //Output: 1 Year(s) 3 Month(s) 23 day(s) aprox
    const updatedType = 4;
    //Output: Less than a year