Question

我有一个用 Angular 编码的列表元素，它显示了所有的汽车，我想在它的左上角添加一个工具提示。

我尝试过的：

I made a span tag with class "tooltip" that encapsulates the ul. I added the "position: 
relative" property with css. Then I placed a span tag inside the list element and added the 
text I would place inside the tooltip and added the "display: none" property using css. Then I 
placed some css codes so that the tooltip appears when hovering over this list element with 
css. You will find below.

注意：我想在悬停时显示工具提示的列表元素：“所有品牌”

brand.component.html：

   <span class="tooltip">
        <ul *ngIf="dataLoaded==true" class="list-group">
            <li (click)="currentBrand=null" routerLink="/cars" class="list-group-item" [ngClass]="{'active': !currentBrand}">
                <span class="text">
                    Listed All Cars
                </span> 
                All Brands
            </li>
            <li class="list-group-item" (click)="currentBrand = brand" routerLink="/cars/brand/{{brand.brandId}}" [ngClass]="{'active': currentBrand === brand}" *ngFor="let brand of brands">{{brand.brandName}}</li>
        </ul>
    </span>

brand.component.css：

/* Tooltip */

.tooltip {
    position: relative;
}

ul li:first-child .text {
    display: none;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 5px 0;
    padding: 5px 1px;
    z-index: 1;
}

ul li:first-child:hover ul li:first-child .text {
    display: inline-block;
    position: absolute;
}

ul li:first-child .text::after {
    content: "";
    position: absolute;
    bottom: 110%;
    right: 90%;
    border: 5px solid;
    border-color: black transparent transparent transparent;
}

我期待您的帮助和建议（如果有）。

Answer 1

固定 css。工具提示文本必须是“可见性：隐藏；”而不是没有

 #include<stdio.h>
 int main()
 {
int limit,i;
float a,sum=0.0,max=0.0,min;

printf("Enter the number limit:");
scanf("%d",&limit);
printf("Enter the  numbers:");

   for(i=0;i<limit;i++)
{
   scanf("%f",&a);
    
    if(a>max)
    {
        max=a;
    }
    if(a<min)
    {
        min=a;
    }
    sum=sum+a;
}
printf("\nThe sum of the numbers is:%f",sum);
printf("\nThe average of the numbers is:%f",sum/limit);
printf("\nThe maximum number is:%f",max);
printf("\nThe minimum number is:%f",min);

}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 5px 0;
    padding: 5px 1px;
    z-index: 1;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
span: {
    display: none;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 5px 0;
    padding: 5px 1px;
    z-index: 1;
}



ul li:first-child:hover ul li:first-child .text {
    display: inline-block;
    position: absolute;
}

ul li:first-child .text::after {
    content: "";
    position: absolute;
    bottom: 110%;
    right: 90%;
    border: 5px solid;
    border-color: black transparent transparent transparent;
}

无法向列表元素添加工具提示

1 个答案: