Not Solved [How To?] Insert tooltip inside a post with mycode.
#1
Not Solved
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.
Reply
#2
Not Solved
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>
Do not ask me help through PM or Discord
Reply
#3
Not Solved
My theme is bootstrap based.
Is it possible to working tooltip like [tooltip=Mybb] It is mybb software. [url]https://mybb.com[/url[/tooltip]?
Reply
#4
Not Solved
I'd just updated my post Smile
Do not ask me help through PM or Discord
Reply
#5
Not Solved
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.

[Image: L6njGxt.jpg]

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.
Reply
#6
Not Solved
(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
Do not ask me help through PM or Discord
Reply
#7
Not Solved
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?
Reply
#8
Not Solved
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.
Reply
#9
Not Solved
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.


Attached Files Thumbnail(s)
   
Reply
#10
Not Solved
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>


Attached Files Thumbnail(s)
   
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)