I am looking to style my tooltips using CSS, specifically I want the background of the tooltips to be gray and the text to be bold.
The issue is that I am unsure how to do this, especially since I have a list with multiple options, each option having its own tooltip. I want to style the tooltips within the options of my list using CSS.
Below is the code for my list:
<select id="worker" class="form-control" [(ngModel)]="selectedExportWorker" [formControl]="workerForm.controls['selectedExportWorker']" (ngModelChange)="selectWorker()">
<option [ngValue]="blankObject"></option>
<option *ngFor="let worker of workerExportList; index as i" [ngValue]="worker" class="tooltip" data-toggle="tooltip" data-placement="top" title="{{info_bulle_export[i]}}">{{worker.label}}</option>
</select>
Here is the current appearance of the tooltips I have: https://i.sstatic.net/AXhPp.png
And here is an example of the tooltip appearance I aim to achieve: https://i.sstatic.net/PqNv0.png
Here is the full .html code:
<div class="workers center">
...
(Complete .html code is too lengthy to display here)
...
</div>
If you require the complete .html code, please let me know.
Additionally, here is my CSS code:
/* CSS code for custom tooltips */
.tooltip {
...
}
/* Additional styles for tooltips */
* {
...
}
... (Remaining CSS styles are also included)
If anyone can assist with this, I would greatly appreciate it. Thank you.