이 문서에서는 일반 JavaScript를 사용하는 도구 설명을 보여줍니다.
일반 JavaScript 도구 설명을 만드는 방법은 무엇입니까?
JavaScript를 사용하여 툴팁을 생성하려면 ' 마우스 오버 ' 그리고 ' 마우스아웃 ” 이벤트. 더 나은 이해를 위해 아래 주어진 예를 따르십시오.
예제 1: JavaScript를 사용한 도구 설명
주어진 예에서 순수한 JavaScript로 툴팁을 생성하고 ' 스타일 ' 기인하다.
먼저 mouseover 이벤트에 툴팁을 표시할 텍스트를 만듭니다.
< h5 아이디 = '텍스트' > 리눅스 h5 >
'를 사용하여 툴팁이 나타날 텍스트를 가져옵니다. getElementById() ' 방법:
여기서 lh = 문서. getElementById ( '텍스트' ) ;
이제 ' addEventListener() ' 메서드를 전달하여 ' 마우스 오버 ” 이벤트와 function()을 매개변수로 사용합니다. 정의된 함수에서 먼저 ' 사업부 ” 요소에서 호버에 표시될 텍스트를 설정하고 “ 스타일 ' 기인하다. 마지막으로 ' 추가 어린이() ' 방법:
lh. addEventListener ( '마우스 오버' , 기능 ( ) {툴팁이었다 = 문서. createElement ( '사업부' ) ;
툴팁. innerHTML = '기술을 배울 수 있는 최고의 웹사이트' ;
툴팁. 스타일 . 시계 = '보이는' ;
툴팁. 스타일 . 위치 = '순수한' ;
툴팁. 스타일 . 배경색 = 'rgb(107, 101, 101)' ;
툴팁. 스타일 . 심 = '5픽셀' ;
툴팁. 스타일 . 경계 반경 = '3픽셀' ;
툴팁. 스타일 . 색상 = '하얀색' ;
툴팁. 스타일 . 왼쪽 = '오십%' ;
툴팁. 스타일 . 너비 = '200픽셀' ;
문서. 몸 . 추가 어린이 ( 툴팁 ) ;
} ) ;
여기에서 ' 마우스아웃 ” 커서가 텍스트에서 멀어지는 동안 툴팁을 제거하는 이벤트:
lh. addEventListener ( '마우스아웃' , 기능 ( ) {
문서. 몸 . removeChild ( 툴팁 ) ;
} ) ;
산출
예 2: CSS와 함께 JavaScript를 사용하는 도구 설명
CSS를 사용하여 JavaScript에서 도구 설명을 만들 수도 있습니다.
이렇게 하려면 태그를 사용하여 툴팁의 텍스트를 표시할 영역을 만들고 id를 할당합니다. #my도구 설명 ”:
< 스팬 아이디 = 'myTooltip' > 기간 >'를 사용하여 텍스트 및 툴팁의 참조를 가져옵니다. getElementById() ' 방법:
여기서 lh = 문서. getElementById ( '텍스트' ) ;툴팁이었다 = 문서. getElementById ( 'myTooltip' ) ;
'에서 툴팁을 호출합니다. 마우스 오버 ” 이벤트를 “ innerHTML ' 재산:
lh. addEventListener ( '마우스 오버' , 기능 ( ) {툴팁. 스타일 . 시계 = '보이는' ;
툴팁. innerHTML = '기술을 배울 수 있는 최고의 웹사이트' ;
} ) ;
'에서 툴팁을 숨깁니다. 마우스아웃 ” 이벤트를 설정하여 “ 시계 ” 속성을 “ 숨겨진 ”:
lh. addEventListener ( '마우스아웃' , 기능 ( ) {툴팁. 스타일 . 시계 = '숨겨진' ;
} ) ;
아이디 만들기' #my도구 설명 ” 도구 설명의 스타일을 지정하는 스타일 시트에서:
#my도구 설명 {시계 : 숨겨진 ;
너비 : 200픽셀 ;
와 함께 - 색인 : 1 ;
배경 - 색상 : RGB ( 107 , 101 , 101 ) ;
텍스트 - 맞추다 : 센터 ;
색상 : 하얀색 ;
심 : 5px 0 ;
국경 - 반지름 : 3px ;
왼쪽 : 오십 %;
}
툴팁이 텍스트에 성공적으로 구현된 것을 볼 수 있습니다.
HTML 및 CSS를 사용하여 도구 설명을 만드는 방법은 무엇입니까?
JavaScript 없이 도구 설명을 만들 수도 있습니다. HTML 파일에서 ' 리눅스 ”, 마우스를 가져가면 툴팁이 표시됩니다. 제목/텍스트
태그 안에 툴팁 텍스트를 설정하는 요소를 만듭니다.
< h5 수업 = '툴팁' >
리눅스
< 기간 수업 = '툴팁 텍스트' >
기술을 배울 수 있는 플랫폼
기간 >
h5 >
스타일 시트에서 HTML 요소에 할당할 클래스 또는 ID를 만듭니다. 여기에서 우리는 '클래스를 만들 것입니다. 툴팁 ” 제목에 할당됨:
. 툴팁 {
위치 : 상대적인 ;
표시하다 : 인라인 - 차단하다 ;
}
클래스 정의 툴팁 텍스트 ' 도구 설명의 텍스트 스타일을 지정하고 HTML ' <스팬> ” 태그:
. 툴팁 텍스트 {
시계 : 숨겨진 ;
너비 : 150픽셀 ;
배경 - 색상 : RGB ( 107 , 101 , 101 ) ;
색상 : #fff ;
텍스트 - 맞추다 : 센터 ;
심 : 5px 0 ;
국경 - 반지름 : 3px ;
위치 : 순수한 ;
와 함께 - 색인 : 1 ;
맨 아래 : 125 %;
왼쪽 : 오십 %;
여유 - 왼쪽 : - 60픽셀 ;
불투명 : 0 ;
이행 : 불투명도 0.3초 ;
}
세트 ' 호버링 ” 효과는 “ 툴팁 호버 효과에 대한 툴팁을 표시하는 클래스:
. 툴팁 : 호버링 툴팁 텍스트 {
시계 : 보이는 ;
불투명 : 1 ;
}
산출
일반 JavaScript 도구 설명과 관련된 모든 필수 지침을 컴파일했습니다.
결론
JavaScript를 사용하여 툴팁을 생성하려면 ' 마우스 오버 ' 그리고 ' 마우스아웃 ” 이벤트, 요소에 마우스를 올리면 툴팁이 표시되고 mouseout 이벤트가 트리거되면 숨겨집니다. 툴팁의 스타일을 지정하려면 ' 스타일 ” JavaScript의 속성. 이 문서에서는 일반 JavaScript, CSS가 있는 JavaScript 및 JavaScript가 없는 도구 설명을 사용하여 도구 설명을 만드는 가장 좋은 예를 시연했습니다.