Как настроить размер шрифта текста всплывающей подсказки начальной загрузки? - PullRequest
Новая
       10

Как настроить размер шрифта текста всплывающей подсказки начальной загрузки?

0 голосов
/ 14 сентября 2018

У меня есть этот поповер, который сообщает вам, где находится код CVV вашей кредитной карты, когда вы наводите на нее курсор, проблема в том, что текст по умолчанию слишком большой, и я не могу найти, где его уменьшить.

Мой HTML-код: 

 <div
     class="sprite_icons icon_creditcard_code"
     data-trigger="hover"
     aria-hidden="true"
     data-toggle="popover"
     data-placement="right"
     title="Security Code"
     data-content="This is the text I want to change i'ts really long, longer than this. 
     >
</div>

Хотя я думаю, что это не сработает, если я добавлю класс CSS, я покажу его вам на всякий случай: 

.sprite_icons {
    float: left;
    background-image: url(/static/img/sprite_icons.png);
    background-repeat: no-repeat;
}

.icon_creditcard_code {
    width: 32px;
    height: 20px;
    background-position: -64px -104px;
}

Ответы [ 2 ]

0 голосов
/ 28 января 2019

Вот мое решение, пожалуйста, проверьте пример ниже: 

$('[data-toggle="popover"]').popover({
  html: true,
  content: function() {
    return '<div><img src="' + $(this).data('img') + '" />' + "<p class='icon_creditcard_code'>This is the text I want to change i'ts really long, longer than this</p>" + '</div>';
  }
});
.icon_creditcard_code {
  font-size: 0.9em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<a href="#" data-toggle="popover" data-trigger="hover" aria-hidden="true" data-placement="right" title="Security Code" class="btn btn-success sprite_icons icon_creditcard_code" data-img="//placehold.it/50/09f/fff.png?text=sprite_icons">CVV code</a>
0 голосов
/ 14 сентября 2018

Вы можете изменить размер текста, изменив font-size для класса .tooltip, который используется всплывающей подсказкой.

Пример: 

.tooltip{
   font-size: 3rem;
}
...