CODEWITHSUNDEEP
javascriptcsssasstooltipbourbon
Edgar Quintero
Edgar Quintero

Reputation: 4441

Prevent Widows in Tooltips with SASS (Bourbon) or JavaScript?

I have a custom tooltip implemented with SASS (and Bourbon) and would like to prevent widows from appearing, example:

enter image description here

.custom-tooltip {
  @include position(relative);
  .tooltip-right {
    font-family: $brand-font-condensed;
    font-size: 14px;
    font-weight: 400;
    position: fixed;
    text-align: left;
    overflow: visible !important;
    background-color: rgba($dark-gray, 0.95);
    color: #fff;
    padding: 7px 10px;
    z-index: 9000;
    visibility: hidden;
    opacity: 0;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
    @include transition (.1s ease-in);
    @include size(200px auto);
    white-space: normal;
  }

  &:hover .tooltip-right, {
    visibility: visible;
    opacity: 1;
    @include transition (.2s ease-out);
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
  }
}

Are there any preferred way of doing this with just CSS or can this only be correctly calculated with JavaScript? I know I have a width in place but without it the tooltips would just be one big sentence. I do not want to use a plugin because there are lots of different use cases for these tooltips based on the design so I'm doing them by hand. Thanks in advance!

Upvotes: 0

Views: 44

Answers (1)

whmii
whmii

Reputation: 440

Depending where the tooltip's content is coming from, the best way to deal with this would be to update the content to have a   as the space in-between the last two words.

https://unicode-table.com/en/00A0/

Upvotes: 0

Related Questions