Как создать речевой пузырьковый указатель от границы одного div до другого div - PullRequest
Новая
       26

Как создать речевой пузырьковый указатель от границы одного div до другого div

2 голосов
/ 11 июня 2019

Я делаю всплывающий комментарий / всплывающую подсказку / речевой пузырь.Стрелка / указатель речевого пузыря должна указывать на метку-метку, созданную getselection

Я пробовал popper.js, mark.js и bootstrap, но стрелки не указывают всю дорогу доspan-tag 

<!DOCTYPE html>
<html>
<body>
    <div id="grundnode" >
        <p class="grundnode">
            Select some of this text with the mouse
        </p>
    </div>
    <div id="uddybninger">
        <!--This is where the bubble will appear-->
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>


</body>
</html>

и это jquery, который создает всплывающий комментарий 

<script type="text/javascript">
    $(function() {
                var grundnode = $("#grundnode");
                var uddybninger = $("#uddybninger");
                $(document).bind("mouseup", function() { 
                        var tekstenSomBlevMarkeret = '';
                        if (!window.x) {
                            x = {};
                        }
                        x.Selector = {};
                        x.Selector.getSelected = function() {

                            if (window.getSelection) {
                                tekstenSomBlevMarkeret = 
window.getSelection();
                            } else if (document.getSelection) {
                                tekstenSomBlevMarkeret = 
document.getSelection();
                            } else if (document.selection) {
                                tekstenSomBlevMarkeret = 
document.selection.createRange().text;
                            }
                            return tekstenSomBlevMarkeret; 
                        }
                        if (x.Selector.getSelected().toString() != '') { 
                                var node = document.createElement("p"); 
                                $(node).addClass("uddybningsnode");
                                var textnode = 
document.createTextNode(x.Selector.getSelected().toString()); 
                                node.appendChild(textnode);                                    
document.getElementById("uddybninger").appendChild(node); 
                                var tusch = x.Selector.getSelected()
                                if (document.selection && 
!window.getSelection) {
                                    tusch.pasteHTML("<mark>" + tusch.htmlText + "</mark>"); 

                                } 
                            }
                        });
                })
</script>

Я создал исходный красный div и всплывающий зеленый 

    .uddybningsnode {
        background-color: lightgreen;
        line-height: 1.9em;
        font-size: 16px;
        margin: 10px;
        border: 1px #333 solid;
        padding: 5px;
        width: 450px;
    }

    .grundnode {
        background-color: lightcoral;
        line-height: 1.9em;
        font-size: 16px;
        margin: 10px;
        border: 1px #333 solid;
        padding: 5px;
        width: 450px
    }
</style>
...