Я хотел бы применить css к моим подсказкам, я хочу, чтобы фон моих подсказок был серым, а текст - жирным.
проблема в том, что я действительно не знаю как это сделать, особенно если у меня есть список с большим количеством опций, и у каждого есть своя всплывающая подсказка, я хочу применить css к подсказкам, которые есть в опциях моего списка.
код из моего списка:
<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>
вот результат всплывающей подсказки, которая у меня есть: 
и вот пример всплывающей подсказки, которую я хочу чтобы получить: 
вот весь мой. html код:
вот весь мой. html код, если вам нужно:
import { Observable } from 'rxjs/Rx';
import { Http, RequestOptions, Headers, ResponseContentType, Response } from '@angular/http';
import { environment } from './../../../../environments/environment';
import { ExportService } from './../../exportDirectoryBrowsing/export.service';
import { sideMenuComponent } from './../../../layout/side-menu-component/side-menu.component';
import { WorkerParameterInfo } from './../workerParameterInfo';
import { WorkerExport } from './WorkerExport';
import { MappingSystemService } from './../../mappingSystem/mapping-system.service';
import { CatalogService } from './../../catalogue/Catalog.service';
import { Catalog } from './../../catalogue/Catalog';
import { MappingSystem } from './../../mappingSystem/MappingSystem';
import { MappingContext } from './../../mappingContext/MappingContext';
import { Component, ViewChild } from '@angular/core';
import { LazyLoadEvent, ConfirmationService, TreeNode, Message } from 'primeng/primeng';
import { FormsModule } from '@angular/forms';
import { WorkersService } from '../worker.service';
import { SharedService } from './../../../shared.service';
import { FormGroup, FormBuilder } from '@angular/forms';
import * as FileSaver from 'file-saver';
import { DialogModule, Dialog } from 'primeng/components/dialog/dialog';
import {ProgressSpinnerModule} from 'primeng/components/progressspinner/progressspinner';
import { Timeouts } from 'selenium-webdriver';
import { $$iterator } from 'rxjs/internal/symbol/iterator';
@Component({
selector: 'export',
templateUrl: './export.component.html',
styleUrls: ['./../../global.css'],
providers: [WorkersService, ConfirmationService]
})
export class ExportComponent {
info_bulle_export=["Exporte les données des catalogues du contexte de mapping en cours au format XML",
"Exporte les données de mapping du contexte de mapping en cours au format XML",
"Exporte dans le même fichier XML les données catalogues et mapping par système de mapping, peut exporter dans une archive de fichiers XML tous les systèmes de mapping du contexte en cours",
"Exporte le contexte de mapping en cours au format zip archivant les données catalogues dans un fichier XML et les données mapping dans un autre fichier XML",
];
value = 0;
workerForm: FormGroup;
selectedExportWorker: WorkerExport;
selectedMappingContext: MappingContext;
selectedMappingSystem: MappingSystem;
selectedCatalog: Catalog;
catalogues: Catalog[] = [];
workerExportList: WorkerExport[] = [];
mappingSystems: MappingSystem[] = [];
blankObject: Catalog = new Catalog(0, 'TOUS', 'TOUS', null);
blankObjectMS: MappingSystem = new MappingSystem(0, 'TOUS', null, null, null, null, null);
blanckObjectMSAllInAZip : MappingSystem = new MappingSystem(100, 'TOUS DANS UN ZIP', null, null, null, null, null);
isHiddenCatalogue = false;
isHiddenMappingSystem = false;
filesTree2: TreeNode[] = [];
selectedFile: TreeNode;
msgs: Message[] = [];
display: Boolean = false;
response: Response;
@ViewChild('dialog') dialog: DialogModule;
@ViewChild('spinner') spinner: ProgressSpinnerModule;
constructor(private workersService: WorkersService, private api: SharedService,
fb: FormBuilder, private catalogService: CatalogService, private mappingSystemService: MappingSystemService,
private exportService: ExportService, private confirmationService: ConfirmationService, private http: Http) {
this.workerExportList.push(new WorkerExport('catalogueExport', 'Export des catalogues'));
this.workerExportList.push(new WorkerExport('mappingExport', 'Export des mappings'));
this.workerExportList.push(new WorkerExport('koalaExport', 'Export koala'));
this.workerExportList.push(new WorkerExport('pamdaExport', 'Export pamda'));
this.workerForm = fb.group({
'selectedExportWorker': '',
'selectedCatalog': this.blankObject,
'selectedMappingSystem': this.blankObjectMS
})
this.selectedCatalog = this.blankObject;
this.selectedMappingSystem = this.blankObjectMS;
this.api.getDataMappingContext().subscribe(_sharingData => {
this.selectedMappingContext = _sharingData;
if (_sharingData) {
this.exportService.getByMappingCOntext(_sharingData.id).subscribe(data => {
this.createTree(data, this.filesTree2, null);
console.log(this.filesTree2);
});
}
});
}
ngOnInit() {
localStorage.removeItem('mapping');
localStorage.removeItem('page');
this.api.getDataMappingContext().subscribe(mappingContext => {
if (mappingContext != null) {
this.selectedMappingContext = mappingContext;
this.mappingSystemService.getByMappingContext(this.selectedMappingContext.id).subscribe(data => this.mappingSystems = data);
this.catalogService.getCatalogByMappingContext(this.selectedMappingContext.id).subscribe(data => this.catalogues = data);
}
});
}
exportCatalogue() {
return this.workersService.exportCatalogue(new WorkerParameterInfo()).subscribe();
}
selectWorker() {
this.value = 0;
if (this.selectedExportWorker != null && (
this.selectedExportWorker.code === 'catalogueExport' ||
this.selectedExportWorker.code === 'dataExport')) {
this.isHiddenCatalogue = false;
} else {
this.isHiddenCatalogue = true ;
}
if (this.selectedExportWorker != null && this.selectedExportWorker.code === 'koalaExport') {
this.isHiddenMappingSystem = false;
} else {
this.isHiddenMappingSystem = true;
}
}
executer() {
this.value = 60;
let workerParameterInfo = new WorkerParameterInfo();
workerParameterInfo.currentMappingContext = this.selectedMappingContext.id;
workerParameterInfo.disabledByUser = false;
if (this.selectedExportWorker.code === 'catalogueExport') {
this.display = true;
workerParameterInfo.catalogueIdOrALL = this.selectedCatalog.id.toString();
this.workersService.exportCatalogue(workerParameterInfo).subscribe((res: Response) => {
console.log('response catalogueExport :', res);
this.display = false;
this.refresh();
});
} else if (this.selectedExportWorker.code === 'mappingExportV1_0') {
this.display = true;
this.workersService.exportMappingV10(workerParameterInfo).subscribe((res: Response) => {
this.display = false;
this.refresh();
});
} else if (this.selectedExportWorker.code === 'mappingExport') {
this.display = true;
this.workersService.exportMapping(workerParameterInfo).subscribe((res: Response) => {
this.display = false;
this.refresh();
});
} else if (this.selectedExportWorker.code === 'koalaExport') {
this.display = true;
workerParameterInfo.mappingSystemIdOrALL = this.selectedMappingSystem.id.toString();
console.log('koala workerParameterInfo :', workerParameterInfo.mappingSystemIdOrALL);
this.workersService.exportKoala(workerParameterInfo).subscribe((res: Response) => {
console.log(res);
this.display = false;
this.refresh();
});
} else if (this.selectedExportWorker.code === 'pamdaExport') {
this.display = true;
this.workersService.exportPamda(workerParameterInfo).subscribe((res: Response) => {
this.display = false;
this.refresh();
});
}
this.value = 90;
this.refresh();
this.value = 100;
}
createTree(data: any[], tree: TreeNode[], parent: TreeNode) {
// console.log('creating Tree From: ', data);
data.forEach(dir => {
let treeNode: TreeNode = {
label: '',
data: '',
children: [],
leaf: false,
expandedIcon: '',
collapsedIcon: '',
icon: '',
expanded: true,
parent: {}
};
if (dir.leaf === false) {
treeNode.label = dir.label;
treeNode.expandedIcon = 'fa-folder-open';
treeNode.collapsedIcon = 'fa-folder';
treeNode.parent = parent;
this.createTree(dir.children, treeNode.children, treeNode)
tree.push(treeNode);
} else {
treeNode.label = dir.label;
treeNode.leaf = true;
treeNode.data = dir.data;
treeNode.parent = parent;
if (treeNode.label.endsWith('zip')) {
treeNode.icon = 'fa-file-archive';
} else if (treeNode.label.endsWith('xml')) {
treeNode.icon = 'fa-file-code';
} else if (treeNode.label.endsWith('xls')) {
treeNode.icon = 'fa-file-excel';
} else if (treeNode.label.endsWith('txt')) {
treeNode.icon = 'fa-file';
} else {
treeNode.icon = 'fa-file';
}
tree.push(treeNode);
}
});
}
confirmDelete() {
this.confirmationService.confirm({
message: 'Êtes-vous sûr de vouloir supprimer cet objet?',
header: 'Confirmation de suppression',
icon: 'fa fa-trash',
accept: () => {
this.deleteFile();
}
});
}
nodeSelect(event) {
if (event.node.leaf === false) {
this.selectedFile = null;
}
}
deleteFile() {
this.exportService.delete(this.selectedFile.data).subscribe(() => {
this.selectedFile.parent.children.splice(this.selectedFile.parent.children.findIndex(
child => child.data === this.selectedFile.data), 1);
this.showSuccess('Fichier supprimé avec succès');
});
}
downloadFile() {
const headers = new Headers();
headers.append('Content-Type', 'application/json');
let requestOptions = new RequestOptions({
headers: headers,
responseType: ResponseContentType.Blob, // dont forget to import the enum
// In case you get Module not found: Error: Can't resolve '@angular/http/src/enums', just use 3 instead ex 'responseType:3'
});
let workerParameterInfo = new WorkerParameterInfo();
workerParameterInfo.pathFile = this.selectedFile.data;
let bodyString = JSON.stringify(workerParameterInfo);
this.http.post(`${environment.url.base}${environment.url.pamda.downloadFile}`, bodyString, requestOptions).subscribe(res => {
FileSaver.saveAs(res.blob(), this.selectedFile.label)
});
}
refresh() {
this.filesTree2 = [];
if (this.selectedMappingContext) {
this.exportService.getByMappingCOntext(this.selectedMappingContext.id).subscribe(data => {
this.createTree(data, this.filesTree2, null);
// console.log(this.filesTree2);
})
}
}
showError() {
this.msgs = [];
this.msgs.push({ severity: 'error', summary: 'Message d\'erreur', detail: 'Vous ne pouvez pas supprimer ce catalogue' });
}
showSuccess(details) {
this.msgs = [];
this.msgs.push({ severity: 'success', summary: 'Succès', detail: details });
}
}
и это все мои css код:
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
background-color: #555;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
* {
margin: 0;
padding: 0;
outline-color: #FB864F;
}
*:focus{
outline-color: #FB864F;
}
*:hover{
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
input[type="text"]:focus{
outline-color: #FB864F;
}
h1, h2, h3, h4, h5, h6
{ font-size: 175%;
color: #F55000;
margin: 0 0 8pt 0;
padding: 8pt 0 3pt 0;}
h2
{ font-size: 175%;
color: #F55000;}
h3
{ font-size: 140%;
color: #FB864F;
margin-left: 8pt;}
Может кто-нибудь помочь мне, пожалуйста?