CODEWITHSUNDEEP
angulartwitter-bootstrap-3ngx-bootstrap
Keslavi
Keslavi

Reputation: 143

ngx-bootstrap with bootstrap3 set tooltip width

I need to increase the width of the ngx-bootstrap tooltip, I've tried every solution I could find without success.

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>

[UPDATE] placing this in style.css does cause it to rotate 45 degrees (for verification), the background can be shrunk but not expanded. so there's something more in the inner html.

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

Upvotes: 0

Views: 5602

Answers (3)

Cofad
Cofad

Reputation: 184

Here's what worked for me using ngx-bootstrap V3.3.0.

HTML

<div class=" tooltip-350" [tooltip]="LONG_TOOLTIP_TEXT" placement="top">
   Hover Over me!
</div>

CSS

::ng-deep .tooltip-350 ~ .tooltip .tooltip-inner {
  max-width: 350px;
  min-width: 350px;
}

A custom class, ".tooltip-350", is added to be able to uniquely select the container the tooltip is applied to.

ngx-bootstrap creates a sibling element with class ".tooltip" that can be selected using the "~" general sibling selector.

The actual width of the tooltip is controlled by a class called ".tooltip-inner" which is selected using the descendant selector (just a space between classes/elements/etc.).

The "::ng-deep" is required since this is selecting an element inside a child component rather than an element directly in the component. Alternatively, these styles could be added to the global style sheet without the need for "::ng-deep".

Putting all this together gives the above CSS selector.

The properties that control the width in this case are "min-width" and "max-width" so by setting that to whatever values desired, the width of the tooltip can be changed.

Upvotes: 8

Keslavi
Keslavi

Reputation: 143

Ultimately went with this after some excellent help from Gaspar. it turned out the max-width property was getting me and needed to set both .bottom and inner.

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

<a [tooltip]='acctTooltip' class='tooltip-wide' placement='bottom'>blah blah</a>

Upvotes: 0

Gaspar
Gaspar

Reputation: 1591

Add a class to your element and put min-width to your class in css.

html

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

css

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

If you want to get the actual width of the tooltip, you can use [style.width]="foo" in your element. Them all you have to do is to create a foo var in your component and get/set the width. Note: Do not forget the ; in the value (i.e 150px;)

Upvotes: 1

Related Questions