popover / icon

부트스트랩 : 4.5 버전

폰트어썸(아이콘) : 5.15.4 버전

부트 스크랩을 사용한 사이트 > 테이블 > 한 컬럼의 내용이 아이콘이어서 설명 추가함

 

$(function(){
		$('[data-toggle="popover"]').popover({
			trigger : 'hover'
			,html : true
			,content : '<i class=\"fab fa-youtube\"></i> : youtube / news.naver / tv.naver <br> '
						+' <i class=\"fas fa-scroll\"></i> : terms.naver <br>'
						+' <i class=\"fas fa-file\"></i> : .html <br>'
						+' <i class=\"fas fa-minus\"></i> : 그 외 <br>'
		})
	});

 <table>
	<thead>
		<tr>
			<th>1</th>
			<th>2</th>
			<th style="text-align:center;" data-container="body" data-toggle="popover" data-placement="top" data-content="">
				<i class="fas fa-question-circle"></i>
			</th>
		</tr>
	</thead>
 	<tbody id="tempTable" >
	...
	</tbody>
</table>

 

 

---

[1. icon사용하기]

* 어떤 아이콘은 적용이 되고 어떤 건 오류는 안 나지만 영역이 0*0 으로 아이콘이 보이지 않는다

-> 유료버전은 사용할 수 없고 무료(fas와 fab) 버전을 써야 한다. 

* 버전도 확인해야 함 버전에 따라 코드가 다름

https://fontawesome.com/v5/icons/question-circle?s=solid&f=classic 

Font Awesome

https://velog.io/@remon/Font-Awesome-Error-fas-fa-solid

Font Awesome Error!! (fas? fa-solid?)

 

 

[2.popover]

* 작동을 안해서 버전확인해보니 내가 최신문서 버전보고 따라해서 적용이 안된 거 였음.

 

https://getbootstrap.com/docs/4.0/components/popovers/

 

 

popover 내용에 html넣기

https://www.tutorialrepublic.com/faq/how-to-insert-image-inside-bootstrap-popover.php

How to Insert Image inside Bootstrap Popover

https://fightingsean.tistory.com/47

Bootstrap popover content 에 table 넣기

https://www.codingfactory.net/11670

Bootstrap 4 / Popovers / 클릭했을 때 메시지 나오게 하기