https://i.sstatic.net/YzmtN.png
Visible star icon indicates lack of focus on the accordion
https://i.sstatic.net/aNW31.png
Star disappears when accordion gains focus
Below is the CSS code I used to position the star to the left of the accordion:
.icon-star2.relevant-source {
position: absolute;
margin-left: -5em;
}
Here's an example of the coded markup (with placeholder variables):
<ngb-accordion class="accordion accordion-alternate">
<ngb-panel class="source-accordion" *ngFor="x">
<ng-template ngbPanelTitle>
<i *ngIf="x > 0" class="icon-star2 relevant-source"
title="This source contains {{x}} of the top 10 most relevant documents.">
</i>
<span class="source-link source-link-text">{{x}}</span><span class="float-right source-link">
{{x | number:0 }}</span>
</ng-template>
<ng-template ngbPanelContent>
List of documents
</ng-template>
</ngb-panel>
</ngb-accordion>
The main objective is to display a starred element alongside specific accordion items, complete with a tooltip. However, there seem to be challenges in achieving this. Any suggestions or solutions would be greatly appreciated.