Ngx-bootstrap: Set Tooltip Width and wrap the text

[mshirishkumar]

Hi
Could you please let me know how can we set tooltip width and also wrap the text in single line.

[brandonreid]

@mshirishkumar If you inspect, you'll see the tooltip is placed after the item it's referencing, by default. So you can target it with CSS for widths and stuff.

Example...

HTML

<div class="some-container">
  <button tooltip="My button tooltip with lots and lots of text.">Hover Me</button>
</div>

CSS

.some-container .tooltip .tooltip-inner {
  width: 7em;
  white-space: normal;
}

[mshirishkumar]

Thanks brandonreid

[Nalha]

If you still have problems getting the effect through you can use the angular /deep/ tag to make your CSS work through angulars encapsulation.

https://angular.io/docs/ts/latest/guide/component-styles.html#!#special-selectors

[mshirishkumar]

Thanks Nalha

[bujardeari]

I try to do the same but cant do that , neither with component styling or using class. Any changes on how you do this?

[Nalha]

Well yea, I haven't used Angular for a while now but the documentation says this

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

[bujardeari]

But what about customClass can we use that and how would you change the width using cutsomClass?

[ghiscoding]

Came in this post to see how to make the tooltip wider but the suggestions in first few comments didn't work for me. However I got it to work with the containerClass as follow

HTML

<div placement="top" tooltip="my large text...bla bla bla" containerClass="wider-tooltip"></div>

SASS

.wider-tooltip {
  width: 300px;
  .tooltip-inner {
    max-width: 300px;
  }
}

[RanaHamzaHami317]

You may use max-width:content, will work