ngx-bootstrap с bootstrap3 устанавливает ширину всплывающей подсказки - PullRequest
Новая
       17

ngx-bootstrap с bootstrap3 устанавливает ширину всплывающей подсказки

0 голосов
/ 20 сентября 2018

Мне нужно увеличить ширину всплывающей подсказки ngx-bootstrap, я пробовал каждое решение, которое смог найти, но безуспешно.

HTML: 

<a [tooltip]='acctTooltip' placement='bottom'>{{item.AccountNumber}}
...
<ng-template #acctTooltip>
    <!--TODO: figure out how to get the tooltip width to widen-->
    <div>
        <table>
            <tr>
                <th>Title &amp; Address:</th>
                <td>
                    {{item.Title1}}<br /> {{item.Title2}}
                    <br /> {{item.Title3}}
                    <br />
                </td>
            </tr>
            <tr>
                <th>C/M:</th>
                <td>{{item.CreditType}}</td>
            </tr>
            <tr>
                <th>ServiceType:</th>
                <td>{{item.ServiceType}}</td>
            </tr>
            <tr>
                <th>Role:</th>
                <td>{{item.Role[0].Capacity}}</td>
            </tr>
        </table>
    </div>
</ng-template>

[ОБНОВЛЕНИЕ] поместив этов style.css он поворачивается на 45 градусов (для проверки), фон может быть уменьшен, но не расширен.так что есть что-то еще во внутреннем html. 

.tooltip.bottom  {
    border: 1px solid #e0e0e0;
    border-bottom: none;
    border-right: none;
    max-width: none;
    height: 10px;
    transform: rotate(45deg);
    background: white;
}

Ответы [ 2 ]

0 голосов
/ 20 сентября 2018

В конечном итоге, после некоторой превосходной помощи Гаспара.оказалось, что свойство max-width меня достало, и нужно было установить как .bottom, так и inner. 

.tooltip-wide .tooltip.bottom, .tooltip-inner  {
  max-width: none;
}

<a [tooltip]='acctTooltip' class='tooltip-wide' placement='bottom'>blah blah</a>
0 голосов
/ 20 сентября 2018

Добавьте класс к вашему элементу и поместите min-width к своему классу в css.

html

<a class="tooltip-acct" [tooltip]='acctTooltip' placement='bottom'>{{item.AccountNumber}}

css

.tooltip-acct { min-width: 150px; }

Если вы хотите получить фактическую ширину tooltip, вы можете использовать [style.width]="foo" в своем элементе.Все, что вам нужно сделать, это создать переменную foo в вашем компоненте и получить / установить ширину.Примечание: не забывайте ; в значении (то есть 150px;)

...