개요

커서를 맞추면 나오는 툴팁을 작성한다. CSS만으로 만들 수 있는 것 같다. 또한 스마트폰(터치 디바이스)을 고려한 구현.
덧붙여서 툴팁이라는 것은 아래처럼 커서를 맞추면 힌트가 나오는 녀석.

구현 예

상세

의사 클래스를 조합하면 PC와 스마트폰 모두에 대응할 수 있습니다.

PC

커서를 맞추면 툴팁이 나온다. 의사 클래스입니다.:hover에서 대응.

스마트폰(터치 디바이스)

만지면 툴팁이 나온다. 의사 클래스입니다.:focus에서 대응.

구현

뼈대

최소한의 구현을 하면

HTML

詳しくは
<a href="#" class="tooltip" aria-label="これはツールチップの例です。">
    ヒント
</a>
をご覧ください。

Scss

@mixin not-custom() {
  content: attr(aria-label);
  display: block;
  position: absolute;
}

.tooltip {
  position: relative;
  color: goldenrod;
  display: inline-block;

  &:focus {
    &:after {
      @include not-custom();
    }
  }
  &:hover {
    &:after {
      @include not-custom();
    }
  }
}

attr() 사용법 ...

결과

마우스를 맞추면 ...



라는 느낌 큰 프레임은 완성.

체재를 정돈하다

체재용 공통 mixin을 만든다. (mixin이 아니어도 좋지만)

Scss

/*体裁カスタマイズ*/
@mixin custom() {
  top: 100%;
  left: -25%;
  font-size: 1.2rem;
  background-color: #4e4e4e;
  color: #fff;
  margin-top: 0.8rem;
  border-radius: 0.2rem;
  padding: 0.4rem;
  width: 12rem;
  text-align: left;
}

만든 mixin을 포함한다.

Scss

.tooltip {
  position: relative;
  color: goldenrod;
  display: inline-block;

  &:focus {
    &:after {
      @include not-custom();
      //追加
      @include custom();
    }
  }
  &:hover {
    &:after {
      @include not-custom();
      //追加
      @include custom();
    }
  }
}

덤으로 body도 정돈한다.

Scss

/*体裁カスタマイズ*/
body {
  padding: 4rem;
  text-align: center;
  font-size: 2rem;
}

결과

마우스 커서를 맞추면 ...



좋은 느낌!

화살표도 붙인다

삼각 화살표는 CSS로만 만들 수 있습니다.

Scss

/*三角ができる*/
@mixin arrow() {
  position: absolute;
  display: block;
  content: "";
  top: 100%;
  right:0;
  left: 0;
  margin: -1rem auto 0;
  border: 1rem solid transparent;
  border-bottom-color: #4e4e4e;
  height: 0;
  width: 0;
}

tooltip 클래스의 before에 추가해 준다.

Scss

.tooltip {
  position: relative;
  color: goldenrod;
  display: inline-block;

  &:focus {
    //追加
    &:before {
      @include arrow();
    }
    &:after {
      @include not-custom();
      @include custom();
    }
  }
  &:hover {
    //追加ｓ
    &:before {
      @include arrow();
    }
    &:after {
      @include not-custom();
      @include custom();
    }
  }
}

결과

화살표 (삼각형)로 장식되었습니다. 완성입니다.