Bootstrap + popover - не работает скайп href ссылки

Question

У меня есть следующее PHP + HTML:

                <div class="row justify-content-center" id="grid">
                    <?php
                    $result = $conn->query("SHOW TABLES from vmvelevp_roster");
                    while($tableName = mysqli_fetch_row($result)) {
                        $table = $tableName[0];
                        $sql2 = "SELECT * FROM $table";
                        $result2 = mysqli_query($conn, $sql2);
                        while ($row = mysqli_fetch_assoc($result2)) {
                        echo '<figure class="picture-item mr-2">';
                        echo '<img src="img/employees-img/' . $row['picname'] . '" ';
                        echo 'class="img-fluid rounded-circle" ';
                        echo 'data-toggle="popover" ';
                        echo 'data-placement="bottom" ';
                        echo 'title="' . $row['name'] . '" ';
                        echo "data-content='";
                        if (!empty($row['position'])) {
                            echo "<b>Position:</b> " . $row['position'] . "<br />";
                        }
                        if (!empty($row['department'])) {
                            echo "<b>Department:</b> " . $row['department'] . "<br />";
                        }
                        if (!empty($row['email'])) {
                            echo "<b>E-Mail:</b> <a href=mailto:" . $row['email'] .">" . $row['email'] . "</a><br />";
                        }
                        if (!empty($row['phoneinternal'])) {
                            echo "<b>Phone Internal:</b> " . $row['phoneinternal'] . "<br />";
                        }
                        if (!empty($row['phoneexternal'])) {
                            echo "<b>Phone External:</b> " . $row['phoneexternal'] . "<br />";
                        }
                        if (!empty($row['skype'])) {
                            echo "<b>Skype:</b> " . $row['skype'];
                            echo '<a href="skype:charie.brown?chat">Chat</a>';
                            echo "' ";
                        } else {
                            echo "' ";
                        }
                        echo 'alt="...">';
                        echo '<div class="picture-item__details">';
                        echo '<figcaption class="picture-item__title">' . $row['name'] . '</figcaption>';
                        echo '</div>';
                        echo '</figure>';
                    }
                }
                    ?>
                </div>

Электронная почта href отображается отлично, но скайп href не отображается.

Мне было интересно, как я могу это исправить?

Мой javascript относительно всплывающих окон:

jQuery(document).ready(function() {
    $("[data-toggle=popover]").each(function(i, obj) {
        $(this).popover({
            html: true,
            trigger: "manual"
        });
    }).on('mouseenter', function() {
        var _this = this;
        $(this).popover('show');
        $('.popover').on('mouseleave', function() {
            $(_this).popover('hide');
        });
    }).on('mouseleave', function() {
        var _this = this;
        setTimeout(function() {
            if (!$('.popover:hover').length) {
                $(_this).popover('hide');
            }
        }, 50);

И вот мой результат:

Есть ли способ, как это исправить?

Странно, потому что href работает, когда есть электронное письмо, но не работает, когда это ссылка в скайпе. Я попытался разместить код в другом файле (только hrefs) с PHP, подключенным к моей базе данных, и он отлично работает.

EDIT: Просто краткое объяснение. Точный код, который должен быть обработан для одной вещи:

Если я вставлю это в другой документ, href будет работать.

Answer 1

Похоже, что новейшая версия Bootstrap включает в себя дезинфицирующее средство для безопасных URL-адресов, и Skype не является одним из них. Вы можете прочитать больше информации об этом здесь

Чтобы исправить это, у вас есть опции, доступные по ссылке выше, или вы можете отредактировать bootstrap .bundle. js следующим образом:

Изменить это:

var SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file):|[^&:/?#]*(?:[/?#]|$))/gi;

На это:

var SAFE_URL_PATTERN = /^(?:(?:https?|mailto|skype|ftp|tel|file):|[^&:/?#]*(?:[/?#]|$))/gi;

Спасибо всем за предложения.

Answer 2

Вам нужно включить HTML вашего поповера.

<div class="container">
    <a href="#" data-toggle="popover"><a href="skype:atic.chwdhry?chat">test</a>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({html:true});   
});
</script>