div 태그의 name 속성을 활용한 호버시 생성되는 툴팁 커스터마이징

□ div 태그 내의 name 속성을 부여 후 html 코드 작성

□ 기본 툴팁의 디자인 및 표시형식을 아래 코드를 활용하여 커스터마이징 진행

□ css 스타일은 html 파일 내의 스타일 태그를 생성하여 작성하였음

<style>
	div[name]:hover::after {
		content: attr(name); /* 마우스 오버 시에 보여질 콘텐츠로 요소의 title 속성 값을 사용 */
		position: absolute; /* 절대 위치 지정 */
		min-width : 250px; /* 최소 가로 크기*/
		max-width: 450px; /* 최대 가로 크기 */
		height: auto; /* 세로 크기 : 자동 */
		line-height: 20px; /* 텍스트의 높이를 조절하여 수직 가운데 정렬 */
 		white-space: pre-wrap;  /* 자동 줄바꿈 */
		padding: 10px; /* 내부 여백 */
		background: LemonChiffon; /* 배경색 */
		font-size: 12px; /* 폰트 크기 */
		border: 0.5px solid Dimgray; /* 테두리 스타일 및 색상 */
		border-radius : 3px; /* 테두리 곡선 */
		color: Dimgray; /* 텍스트 색상 */
		text-align: left; /* 가운데 정렬 */
		z-index: 100; /* 스택의 순서를 지정하여 다른 요소들 위에 표시될 순서를 조절 */
	}
</style>

+ TIP) html/css 색상참고 사이트

https://blog.naver.com/pjh445/220010107221