Skip to content

Form tooltips don't use $tooltip variables #26816

Closed

Description

@bhrutledge

Instead, they use hard-coded values:

.#{$state}-tooltip {
position: absolute;
top: 100%;
z-index: 5;
display: none;
max-width: 100%; // Contain to parent when possible
padding: .5rem;
margin-top: .1rem;
font-size: .875rem;
line-height: 1;
color: $white;
background-color: rgba($color, .8);
border-radius: .2rem;
}

Here's what I did in my project to make them look more like the other tooltips:

@each $state, $bg-color in (valid: $form-feedback-valid-color, invalid: $form-feedback-invalid-color) {
    .#{$state}-tooltip {
        background-color: rgba($bg-color, $tooltip-opacity);
        border-radius: if($enable-rounded, $border-radius, 0);
        color: color-yiq($bg-color);
        line-height: $line-height-base;
        font-size: $tooltip-font-size;
        padding: $tooltip-padding-y $tooltip-padding-x;
        z-index: $zindex-tooltip;
    }
}

Activity

  1. added
    cssSass sources or compiled CSS
    v4v4, the frozen docs on gh-pages
    on Jul 9, 2018
  2. added
    has-prAn open pull request addresses it
    on Jul 16, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    cssSass sources or compiled CSShas-prAn open pull request addresses itv4v4, the frozen docs on gh-pages

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions