Блог

Главная - Вопросы по программированию - Не удается добавить подсказку к элементу списка

Не удается добавить подсказку к элементу списка

#html #css #angular

Вопрос:

У меня есть элемент списка, закодированный с помощью 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>

бренд.компонент.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;
}

Я с нетерпением жду вашей помощи и совета, если таковые имеются.

Ответ №1:

исправлен css. текст подсказки должен быть «видимость: скрыта;», а не отсутствовать

 .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;
} 
 <!DOCTYPE html>
<html>
<style>

</style>
<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="tooltiptext">
                    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>


</body>
</html>

Комментарии:

1. Я не могу найти твое решение. Я немного переработал ваш код, но он не может работать.

Метки: