How can I update the font size and background color of my Tooltip and make its icon smaller?
Question
I have tried for hours to get this to work trying multiple solved stack solutions and none have worked.
I am assuming I am either missing something or I have my divs/spans incorrect. Any help would be greatly appreciated. Currently my text is very small and bg color is grey and slightly transparent.
Also if it is possible to make the "info" icon smaller that would be great as well. Thank you!
.mainContainer { width: 40%; float: left; }.info { display: flex; }.info.span { align-self: center; }.info-button{ padding: 0; border: none; background: none; outline: none; background-color: transparent; top:-10px; } <div class="mainContainer"> <h3>Main Title</h3> <div class="info"> <h5>Title</h5><span class="info-span"> <button mat-icon-button class="info-button" #tooltip="matTooltip" matTooltip="Tooltip Text"> <mat-icon color="basic" >info</mat-icon> </button> </span> </div> </div>2 answers
solution1
1 ACCPTED 2020-06-26 14:31:04
Try this
::ng-deep .mat-tooltip {
background-color: transparent;
font-size: 12px;
}
You can set !important if not working.
Hope useful
solution2
0 2020-06-26 14:34:49
You can use popper js to integrate and style tooltips it's easy and simple: this is a quick exemple from the documentation:
<!DOCTYPE html>
<title>Popper example</title>
<style>
#tooltip {
background-color: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 13px;
}
</style>
<button id="button" aria-describedby="tooltip">I'm a button</button>
<div id="tooltip" role="tooltip">I'm a tooltip</div>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script>
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
// Pass the button, the tooltip, and some options, and Popper will do the
// magic positioning for you:
Popper.createPopper(button, tooltip, {
placement: 'right',
});
</script>
or visit the official website to learn about popper js: Tutorial
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.