Araç İpucu BBCode / Tooltip BBCode

[malialdemir]

Geliştirici: Stoker
Açıklama: Araç İpucu BBCode, belirli / vurgulanan bir sözcüğü tıklattığınızda bir açılır pencere oluşturur.


BBCode:

Kod: Tümünü seç

[ipucu={TEXT2}]{TEXT1}[/ipucu]

Html:

Kod: Tümünü seç

<span class="bbcode-tooltip" onclick="var t=this;t.classList.toggle('active');if(t.classList.contains('active')){var tt=t.querySelector('.bbcode-tooltip-text');var rect=t.getBoundingClientRect();var ttRect=tt.getBoundingClientRect();var left=0;if(rect.left+ttRect.width>window.innerWidth){left=window.innerWidth-ttRect.width-10;}else if(rect.left<10){left=10-rect.left;}tt.style.left=left+'px';}">{TEXT2}<span class="bbcode-tooltip-text">{TEXT1}</span></span>

Yardım Hattı:

Kod: Tümünü seç

İpucu: [ipucu=ipucu]Tooltip Bubble text[/ipucu]

CSS:

Kod: Tümünü seç

.bbcode-tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted #666;
	cursor: pointer;
}

.bbcode-tooltip-text {
	visibility: hidden;
	opacity: 0;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 4px;
	padding: 6px 10px;
	position: absolute;
	z-index: 1000;
	bottom: 100%;
	left: 0;
	margin-bottom: 8px;
	width: max-content;
	max-width: 300px;
	white-space: normal;
	word-wrap: break-word;
	font-size: 13px;
	transition: opacity 0.3s, visibility 0.3s;
	pointer-events: none;
}

.bbcode-tooltip-text::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 20px;
	border-width: 5px;
	border-style: solid;
	border-color: #333 transparent transparent transparent;
}

.bbcode-tooltip.active .bbcode-tooltip-text {
	visibility: visible;
	opacity: 1;
}

Demo:

Kod: Tümünü seç

[center][ipucu=Buraya tıkla]Here you post ToolTips
You can use line-breaks, smilies and bbcode 
[b][color=#FF0000]Color Red[/color][/b]  8-) 
Img BBCode:
[img]https://phpbb3bbcodes.com/download/file.php?id=3332[/img] [/ipucu][/center]

Buraya tıklaHere you post ToolTips
You can use line-breaks, smilies and bbcode
Color Red
Img BBCode:

[malialdemir]

Buraya tıklaHere you post ToolTips
You can use line-breaks, smilies and bbcode
Color Red
Img BBCode:



[center]Buraya tıklaHere you post ToolTips
You can use line-breaks, smilies and bbcode
Color Red
Img BBCode:
[/center]