How to control width of ONE tooltip?

[rstudner]

I can do:

.tooltip-inner {
  max-width: 500px
}

in my app.scss for ALL tooltips.

But how can I control the width of ONE tooltip?

[simonihmig]

You could assign an individual class and use that as a CSS selector. See https://guides.emberjs.com/v2.9.0/components/customizing-a-components-element/#toc_customizing-the-element-s-class

[rstudner]

Oh, then I must have just botched it hah. I thought I tried that first and the class didn't get applied. I'll try again :)

Like this?

      {{#bs-tooltip class="foobar"}}
        <div style="text-align: center;">Password Requirements:</div>
        <div style="text-align: left;">
          <ul>
            <li>Must include at least one upper case letter, one lower case letter, and a number</li>
            <li>Must be between 4 and 32 characters in length</li>
          </ul>
        </div>
      {{/bs-tooltip}}

Because that doesn't appear to work.

[simonihmig]

Oh, yeah, I guess you are right... should have thought about it a little bit more. The tooltip is inserted at some other place in the DOM through ember-wormhole, therefore this won't work.

This needs some changes in code, will make this a feature request. Should be pretty easy to add...