Simple CSS question I have to ask as I'm not so good in CSS. I have done a popover modal function so when a user hovers over a link a modal shows like

but as you can see the title shows very huge, how can I make the font size smaller?? I can't seem to find the CSS for that. my code is as below:

<script src=".11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'top',
        trigger : 'hover'
    });
});
</script>

<a href="{{action('AltHr\Chatbot\ChatbotController@queries', [$panyID, $entityType, $entityValue])}}" class="btn btn-link" data-toggle="popover" title="{{ucwords($entityValue)}}" data-content="Default popover">{{ucwords($entityValue)}}</a>

Simple CSS question I have to ask as I'm not so good in CSS. I have done a popover modal function so when a user hovers over a link a modal shows like

but as you can see the title shows very huge, how can I make the font size smaller?? I can't seem to find the CSS for that. my code is as below:

<script src="https://code.jquery./jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'top',
        trigger : 'hover'
    });
});
</script>

<a href="{{action('AltHr\Chatbot\ChatbotController@queries', [$panyID, $entityType, $entityValue])}}" class="btn btn-link" data-toggle="popover" title="{{ucwords($entityValue)}}" data-content="Default popover">{{ucwords($entityValue)}}</a>

<style type="text/css">
  /* Popover Header */
  .popover-title {
      font-size: 12px;
  }
  /* Popover Body */
  .popover-content {
      font-size: 12px;
  }
</style>

It's using bootstrap.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 27, 2018 at 5:14 user9348331 asked Feb 27, 2018 at 1:01 Rajveer SinghRajveer Singh 43311 gold badge66 silver badges2222 bronze badges 5

• what version of bootstrap are you using? – davecar21 Commented Feb 27, 2018 at 1:07
• Try to set max-width for popover – Saravana Commented Feb 27, 2018 at 1:10
• @davecar21 3.x? – Rajveer Singh Commented Feb 27, 2018 at 1:13
• but i want to set the font size @Sharvan – Rajveer Singh Commented Feb 27, 2018 at 1:14
• Possible duplicate of Apply CSS to popover in Bootstrap – davecar21 Commented Feb 27, 2018 at 1:21

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Using font-size property for popover's header and body should help.

    /* Popover Header */
    .popover-title {
        font-size: 14px;
        text-align:center;
    }
    /* Popover Body */
    .popover-content {
        font-size: 10px;
        text-align:center;
    }

No idea which version I've got but in my case it was:

    .popover-header {
        font-size: 12px;
    }

    .popover-body {
        font-size: 13px;
    }

Its worth noting that strangeness in font size within a popover may have to do with the container it is sitting in. Before you try to change any CSS, try to set the container via data-container="body". You can use any other container, and it will inherit the font information for that container.

By default, it will inherit whatever container it is created in.

For instance:

body {
    font-size: 12pt;
}

ul {
    font-size: 72pt;
}

<ul>
    <li data-toggle="popover" data-content="foobar">test</li>
</ul>

Is going to result in huge font size for the popover as well. However, you can do:

body {
    font-size: 12pt;
}

ul {
    font-size: 72pt;
}

<ul>
    <li data-toggle="popover" data-content="foobar" data-container="body">test</li>
</ul>

And the font size of the popover will be 12pt.

if you are using v4.x try this css setting

    .popover {
      border: 1px dotted #ccc !important;
      max-width: 600px !important;
    }
    
    .popover-body{
      color: black !important;
      font-size: 12px !important;
      max-width: 600px !important;
        
    }