How can I customize the text font size of my bootstrap tooltip popover?

user_10261003 0
Viewed 8066

I have this popover that tells you where is the CVV code of your credit card when you hover over it the problem is the text default is too big and I can't seem to find where to make it smaller.

My html is:

 <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>

Although I think it's not going to work if I add a CSS class I'll show it to you just in case:

.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;
}
popover twitter-bootstrap css html javascript
2 Answers

You can modify the text size by changing the font-size for the class .tooltip which is being used by the tooltip.

Example:

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

Here is my solution, please check the live example below:

$('[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>

user_69048880
Related