how to change font size on modal popup on hover

Question

hey so i'm creating a button with modal display on hover so i managed to that part with the code below:

 <script src="https://code.jquery.com/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', [$companyID, $entityType, $entityValue])}}" class="btn btn-link" data-toggle="popover" title="{{ucwords($entityValue)}}" data-content="Default popover">{{ucwords($entityValue)}}</a> 

using this code i have achieved so as you guys can see its working well but as you can see the title size is too huge, how can i make it smaller with css? also instead of showing the popup above, how can i show it on the right side? im not really good in css.

Answer 1

If you are using Bootstrap for your popover, you'll need to use the javascript generated element class in your CSS in order to access the title for styling.

Depending on the library version, it would be either .popover-title or .popover-header:

.popover-title {
    font-size: 15px;
}

For the placement issue, you'll make that change in your options when enabling the popover via Javascript:

$('[data-toggle="popover"]').popover({
    placement : 'right',
    trigger : 'hover'
});

Update in response to comment below: A few potential solutions.

1) Make sure your CSS file is included after the file that includes the styles you need to override.

2) Right-click and inspect element to see what existing style rule needs overriding. If you need to get more specific to access the .popover-title, You may need to add the parent element to your CSS:

.popover .popover-title {
    font-size: 15px;
}

3) (last resort?) Override with !important to ensure your styling takes priority:

.popover .popover-title {
    font-size: 15px !important;
}

Answer 2

To be able to make the font-size smaller it's probably easiest to add a font-size attribute in the css-class applied to the text (which you can find out by right-clicking -> inspect element in your browser).

As to showing the popup to the right instead of above, simply change

placement: top

to

placement: right