MyBB Community Forums

How to insert tooltip inside post with mycode?
I searched here but given tutorial not works.
Any have idea for 1.8.24?
Thank you.

Depending on your theme, you have several ways.
Best way is to load jquery tooltip (or bootstrap tooltip if your theme is bootstrap based) and do the correct mycode

Working with BootBB:

Edit headerinclude template and add:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
});

MyCode regex: \[tooltip=(.*?)\](.*?)\[/tooltip\]
MyCode replacement: <span data-toggle="tooltip" data-placement="top" title="$2">$1</span>

My theme is bootstrap based.
Is it possible to working tooltip like [tooltip=Mybb] It is mybb software. [url]https://mybb.com[/url[/tooltip]?

I'd just updated my post

1.Thanks crazycat for help. Your code WORKS FINE But popup message box has less width to displayed content. How to increase the width of popup message and also popup message box displayed in centre of the page?
Whenever we reload page, your headerinclude $(function () { $('[data-toggle="tooltip"]').tooltip() }); code is popup on header of the page.



2.I try https://community.mybb.com/thread-56478-...#pid401633. It works.
If I clicked on popup message then it makes to jump to the top of the page. How to fix it?

if I placed URL inside message then it broke the tooltip.
like [tooltip=Mybb] It is Mybb software. https://mybb.com[/tooltip].. This will break the tooltip.
If I use only [tooltip=Mybb] It is Mybb software. [/tooltip] then works. any BBCode inside tooltip code is not working. So How to insert URL in tooltip message.
If I use [u] [*/u] then it creates another tooltip inside it with overlapping text.

3... How to show popup box content in the centre of the page? At present, if tooltip added to the right end of the text line then it is not visible properly.

(2020-11-02, 12:11 PM)Dr_The_One Wrote: [ -> ]Thanks crazycat for help. Your code has less width of the displayed message and it disappears when removing hover from the word.
I try https://community.mybb.com/thread-56478-...#pid401633. It works.
1. If I clicked on popup message then it makes to jump to the top of the page. How to fix it?

2. if I placed URL inside message then it broke the tooltip.
like [tooltip=Mybb] It is Mybb software. https://mybb.com[/tooltip].. This will break the tooltip.
If I use only [tooltip=Mybb] It is Mybb software. [/tooltip] then works. any BBCode inside tooltip code is not working. So How to insert URL in tooltip message.
If I use [u] [*/u] then it creates another tooltip inside it with overlapping text.

3... How to show popup box content in the centre of the page? At present, if tooltip added to the right end of the text line then it is not visible properly.

Well, you don't want a tooltip, you want a light modal, it's not the same thing

I dont know about light model.
I try to increase width but if tooltip at end of line then popup box goes out of page margin. If I pop up box properly shown then it is ok.

---

One thing remains is I am not able to add URL BBcode inside tooltip popup mesage.
Tooltip popup message only accepting straight forward URL only like http://mybb.com.
It not accept any words beside this url in popup message.e.g [tooptip=Mybb] this is [url=https://mybb.com[Mybb[/url] website .[/tooltip]
Any solution for it?

I want tooltip like https://en.wikipedia.org/wiki
Check also headers of https://www.medicinenet.com/pulmonary_fi...rticle.htm
That is same as I explained in my posts.
Please guide.
Thank you.

I use the Semantic UI framework in my themes, so the following is for it.

Regular Expression: \[tooltip=([a-z0-9_\- ,.+]+)\]([a-z0-9_\- ,\)\(\/\]\[.+]+)\[/tooltip\]
Replacement: <a href="javascript: void(0)" class="mycode_tooltip" title="$1" data-html='<div class="header">$1</div> $2'>$1</a>

Add to headerinclude template:

<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.js" integrity="sha512-1Nyd5H4Aad+OyvVfUOkO/jWPCrEvYIsQENdnVXt1+Jjc4NoJw28nyRdrpOCyFH4uvR3JmH/5WmfX1MJk2ZlhgQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css" integrity="sha512-g/MzOGVPy3OQ4ej1U+qe4D/xhLwUn5l5xL0Fa7gdC258ZWVJQGwsbIR47SWMpRxSPjD0tfu/xkilTy+Lhrl3xg==" crossorigin="anonymous" />

Add to footer template:

<script>
	$('.mycode_tooltip').popup({
		inline: true,
		hoverable  : true,
		position   : 'bottom left',
	});
</script>

I was unable to use the specific popup files to avoid adding the full framework; ideally you should use this only if you already use the framework.

Hi, the following doesn't use any library.

Regular Expression: Same as previous post.
Replacement: <span href="javascript: void(0)" class="mycode_tooltip" data-html='$2' style="cursor: pointer; text-decoration: underline;">$1</span>

Add to footer template.

<script>
	$(function() {
		var moveLeft = 20;
		var moveDown = 10;
		$('.mycode_tooltip').hover(function(e) {
			data_html = $(this).attr('data-html');

			$('#tooltip').html( data_html );

			//$('#tooltip').appendTo( this );
			$('#tooltip').appendTo( this );

			$('#tooltip').fadeIn(50).css('top', e.pageY).css('left', e.pageX);

		}, function() {
			$('#tooltip').html('').hide();
		});
	});
</script>
<div id="tooltip" class="tborder tcat" style="display: none;
	width: auto;
    min-width: 100px;
	max-width: 500px;
	cursor: pointer;
	text-decoration: initial; position: absolute;"></div>