Как показать всплывающую подсказку на длинный текст, полученный из API в bootstrap? - PullRequest
Новая
       30

Как показать всплывающую подсказку на длинный текст, полученный из API в bootstrap?

0 голосов
/ 06 февраля 2020

Я использую angularjs для повторения элементов в карточке для приложения электронной коммерции. Для длинных названий продуктов я хочу, чтобы имя было скрыто как ... и при наведении курсора отображать полный текст во всплывающей подсказке. Я пытался вообще CSS, но не мог работать. Я использовал эту кодовую ручку: https://codepen.io/romanp/pen/bMryRK, но кажется, что она не работает. Есть ли способ решить эту проблему? enter image description here

Размер карты высотой изменяется, если длинная длина, я хочу, чтобы все это было одинаковым, и если длинный текст появляется, я хочу, чтобы он отображался так же, как и всплывающая подсказка, чтобы показать мне полный текст. Как я могу достичь этого?

enter image description here

Как мне этого добиться? Код для карты: 

   <div class="card" ng-repeat="product in drugList">


<img src="../imports/products/{{product.md_code}}.jpg" alt="" >              
                      <b>{{product.prodname}} </b>
        p class="small">{{product.compname}}</p>
    </div>
    </div>

Css для карты: 

card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 250px;
    margin: auto;
    text-align: center;
    font-family: arial;
}

.price {
    color: grey;
    font-size: 20px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

Код, который я пробовал: 

h1 {   white-space: nowrap;    width: 60%;    overflow: hidden;   text-overflow: ellipsis;   position: relative;   line-height: 40px;   pointer-events:none; }

h1:after {   content:"";   display: block;   position: absolute;   top: 0;   right: 0;   width: 48px;   height: 48px;   z-index: 1;   pointer-events:initial; }

h1:hover:after{   cursor: pointer; }

.tooltip {   width: 60%;   visibility: hidden;   background-color:
#fff;   padding: 20px;   -webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,0.3);   opacity: 0;   transition: opacity 0.5s ease; }


h1:hover + .tooltip {   visibility: visible;   transition: opacity
0.5s ease;   opacity: 1; }
...