Как сравнить Плавания с дельтой?

Question

Как сравнить Плавания с дельтой?

Если вы хотите применить определенный стиль только к одной подсказке при наведении на нее, я надеюсь, что это поможет вам.

<html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
    crossorigin="anonymous">

</head>

<body>
    <span id="myTooltip" class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">Hover me</span>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
    <style>
        .red {
            background-color: red !important;
        }
    </style>

    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });

        // for store a random Id, we will use it to remove
        // the style we append to the document on tooltip hover
        var randomId;
         // get the tooltip to apply the style
        $('#myTooltip').hover((event) => {
            if (event.type == 'mouseenter' || event.type == 'mouseover') {
                // generate random Id and append the style to head
                randomId = 'tooltip' + Math.floor(Math.random() * 100) + 1;

                // append the style to the head
                $('head').append(
                    `<style data-remove="${randomId}">
                        .tooltip-inner{ 
                            background-color: red;
                        }
                        .bs-tooltip-auto[x-placement^=bottom] .arrow::before, 
                        .bs-tooltip-bottom .arrow::before {
                            border-bottom-color: red !important;
                        }
                    </style>`
                );
            }
            else if (event.type == 'mouseout' || event.type == 'mouseleave') {
                // we remove the style so doesn't effect other tooltip,
                // we wait to the tooltip fade
                setTimeout(() => {
                    $(`[data-remove="${randomId}"]`).remove();
                }, 100)
            }
        })
    </script>
</body>

</html>

9

ruby

задан Marqus 27 October 2008 в 08:00

2 ответа

Вам, возможно, также понадобится относительный допуск / вычисление дельты

http://realtimecollisiondetection.net/blog/?p=89

0

ответ дан 4 December 2019 в 09:39

Другие вопросы по тегам:

ruby

Как сравнить Плавания с дельтой?

2 ответа

Похожие вопросы: