Search code examples
javascripttooltip

javascript - tooltip when selecting chinese text


I would like to display a small tooltip that will embed chinese characters that users select on a web page. Actually, I just want to be able to enlarge the font. I have seen this kind of functionality on another website (ramou.net) but I don't think the way he has coded it is the most simple (and it doesn't seem to be very generic).

Any hints are welcome !

Thank you !


Solution

  • Found the solution :

       <!DOCTYPE html>
        <html>
        <head>
        <script>
        function Mid(String, i, lon)
        { return String.substr(i-1, lon); }
        function Len(String)
        { return String.length; }
        function AscW(String)
        { return String.charCodeAt(0); }
    
        function EstMotChinois(sUni) {
        var kUniMin = 19968
        var kUniMax = 40869
        var i, iLon, iUni;
        var bDes = false;
    
            iLon = sUni.length;
            if(iLon == 0) { return bDes; }
            for(i=1; i<=iLon; i++) {
                iUni = AscW(Mid(sUni, i, 1));
    
                if(iUni < kUniMin || iUni > kUniMax) {
                    return bDes; }
            }
    
            bDes = true;
            return bDes;
        }
        function displayChar()
        {
        sUnicode = document.getSelection().toString();
        if(EstMotChinois(sUnicode)){
        document.getElementById('toolTip').style.display = 'block';
        document.getElementById('toolTip').textContent = document.getSelection();
        }
        }
    
    
        </script>
        </head>
        <body >
        ​​​​<div style="background-color: rgb(12, 135, 140); border: 1px solid rgb(102, 0, 0); position: absolute; top: 30px; left: 30px; display: none;  font-size: 30px;" id="toolTip" onclick="document.getElementById('toolTip').style.display = 'none';"></div>
    
        <p onmouseup="displayChar()">
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris n多少钱多少钱多少钱多少钱isi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
    
        </body>
        </html>