Custom text selection menu on mobile browser

Question

I am doing custom text selection menu on my web page in a desktop browser, it works like following screenshot:

The custom menu is not visible on mobile. It always shows system menu instead, like following screenshot:

Answer 1

you have to handle touchstart and touchend event, btw you can't preventDefault() the context menu on touch screen device so you can display your tooltip with an offset to display both, and don't forget to add touch event handler instead of click on your tooltip buttons :

if (!window.x) {
    x = {};
}

x.Selector = {};
x.Selector.getSelected = function() {
    var t = '';
    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }
    return t;
}

var pageX;
var pageY;

$(document).ready(function() {
		
    function mouseUpHandler() {
        var selectedText = x.Selector.getSelected();
        if(selectedText != ''){
            $('ul.tools').css({
                'left': pageX + 5,
                'top' : pageY - 55
            }).fadeIn(200);
        } else {
            $('ul.tools').fadeOut(200);
        }
    }
    
    $(document).bind("mouseup", );
    $(document).on("mousedown", function(e){
        pageX = e.pageX;
        pageY = e.pageY;
    });

    let lis = [...document.querySelectorAll('li')];
    lis.map( li => li.addEventListener('touchstart', e=>console.log(e.target.innerHTML), false) ); 
    
    document.addEventListener('touchend', e => {
      clearTimeout(pressTimer);
    }, { passive: false });
    document.addEventListener('touchstart', e => {
      pressTimer = window.setTimeout(()=>{
      	pageX = e.changedTouches[0].pageX;
        pageY = e.changedTouches[0].pageY + 80; // 80px offset
        mouseUpHandler();
      }, 800);
    }, { passive: true });
});

body {
    padding: 60px 10px;
}

ul.tools {
    display: none;
    list-style: none;
    box-shadow: 0px 0px 4px rgba(0,0,0,.5);
    border: solid 1px #000;
    position: absolute;
    background: #fff;
}
ul.tools li {
    display: inline-block;
    width: 10px;
    height: 20px;
    border: solid 1px #000;
    margin: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Vestibulum vel orci hendrerit ligula pharetra volutpat et sed dui. Phasellus vitae feugiat dolor. Mauris eleifend neque ac iaculis aliquet. Nunc malesuada nisi in dictum tristique. Vestibulum mauris eros, varius sed faucibus sed, pellentesque et nunc. Curabitur ultricies blandit urna. Pellentesque ut augue mollis, lacinia dui non, rutrum justo. Nunc et odio dapibus, blandit leo eget, aliquet urna. Etiam lorem dolor, vehicula a purus in, fermentum congue diam. Integer vel urna nec turpis posuere tempor eu lacinia purus. Praesent mattis viverra lacus bibendum fringilla. Nulla commodo posuere ante, at cursus est rhoncus quis. In iaculis viverra neque in blandit. Pellentesque eleifend arcu diam, sed sodales ligula pharetra at. Morbi ac nisl adipiscing sem interdum convallis. </p>

<ul class="tools">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>