WordPress.org

Ready to get started?Download WordPress

Forums

Responsive Mobile-Friendly Tooltip
[resolved] Shortcode - script adds a question mark and blinking (27 posts)

  1. Mariusz
    Member
    Posted 12 months ago #

    Hi
    When I use it like:
    [tooltip tip="<strong>1GHz technology</strong><br>blahblah"]<img alt="icon" src="source/file.png" />[/tooltip]
    it's bliking on hover and it adds a big question mark.
    I checked this on FF, chrome and IE.
    Any idea why is that?

    Thanks!

    http://wordpress.org/extend/plugins/responsive-mobile-friendly-tooltip/

  2. Mariusz
    Member
    Posted 12 months ago #

    When I use it as:

    <img title="<b>1GHz technology</b> - blah blah" rel="tooltip" alt="icon" src="source/file.png" /></li>

    html tags are stripped and nothing showes up... ;(

  3. Mariusz
    Member
    Posted 12 months ago #

    What I would do is to show up plugin in no conflict mode (responsive-tooltip.js) like:

    var jq142 = jQuery.noConflict();
    
    	jq142( document ).ready( function()
    		{
    			var targets = jq142( '[rel~=tooltip]' ),
    				target	= false,
    				tooltip = false,
    				title	= false;
    
    			targets.bind( 'mouseenter', function()
    			{
    				target	= jq142( this );
    				tip		= target.attr( 'title' );
    				tooltip	= jq142( '<div id="tooltip"></div>' );
    
    				if( !tip || tip == '' )
    					return false;
    
    				target.removeAttr( 'title' );
    				tooltip.css( 'opacity', 0 )
    					   .html( tip )
    					   .appendTo( 'body' );
    
    				var init_tooltip = function()
    				{
    					if( jq142( window ).width() < tooltip.outerWidth() * 1.5 )
    						tooltip.css( 'max-width', jq142( window ).width() / 2 );
    					else
    						tooltip.css( 'max-width', 340 );
    
    					var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
    						pos_top	 = target.offset().top - tooltip.outerHeight() - 20;
    
    					if( pos_left < 0 )
    					{
    						pos_left = target.offset().left + target.outerWidth() / 2 - 20;
    						tooltip.addClass( 'left' );
    					}
    					else
    						tooltip.removeClass( 'left' );
    
    					if( pos_left + tooltip.outerWidth() > jq142( window ).width() )
    					{
    						pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
    						tooltip.addClass( 'right' );
    					}
    					else
    						tooltip.removeClass( 'right' );
    
    					if( pos_top < 0 )
    					{
    						var pos_top	 = target.offset().top + target.outerHeight();
    						tooltip.addClass( 'top' );
    					}
    					else
    						tooltip.removeClass( 'top' );
    
    					tooltip.css( { left: pos_left, top: pos_top } )
    						   .animate( { top: '+=10', opacity: 1 }, 50 );
    				};
    
    				init_tooltip();
    				jq142( window ).resize( init_tooltip );
    
    				var remove_tooltip = function()
    				{
    					tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
    					{
    						jq142( this ).remove();
    					});
    
    					target.attr( 'title', tip );
    				};
    
    				target.bind( 'mouseleave', remove_tooltip );
    				tooltip.bind( 'click', remove_tooltip );
    			});
    		});

    But it still does not work..

  4. ItayXD
    Member
    Plugin Author

    Posted 12 months ago #

    I'll look into it, can you link me to your website so I can check it live?
    And Js conflict is highly unlikely I dont think any script but jQuery uses jQuery()... (As you can see I'm not using $()).

  5. Mariusz
    Member
    Posted 11 months ago #

    could u please let me know about your email?
    I'd send you private message.

    thanks.

  6. ItayXD
    Member
    Plugin Author

    Posted 11 months ago #

    I got your email, I'm looking into it.

  7. ItayXD
    Member
    Plugin Author

    Posted 11 months ago #

    I checked you example and it works perfectly for me...

  8. Mariusz
    Member
    Posted 11 months ago #

    check your email please.

  9. ItayXD
    Member
    Plugin Author

    Posted 11 months ago #

    I emailed you back a tested solution... problem solved as far as I can tell.
    If you like my plugin please add a review :D

  10. ItayXD
    Member
    Plugin Author

    Posted 11 months ago #

    I understand everything works now, marking as solved...

  11. nijip
    Member
    Posted 9 months ago #

    Hi, I'm getting the same problem. Can you let me know how to resolve the issue. Thanks in advance.

  12. ItayXD
    Member
    Plugin Author

    Posted 9 months ago #

    Can you link me to the page the problem occur?

  13. AgentJay
    Member
    Posted 9 months ago #

    I am also getting blinking/flashing on the tooltip pop-up box.

    You can see it in my Mortgage/Loan calculator widget on the "?" image next "Purchase price:" (in the right sidebar)

    http://www.thetestwebpage.com

    Thanks!

  14. ItayXD
    Member
    Plugin Author

    Posted 9 months ago #

    Hi AgentJay, I wasn't able to reproduce your problem. When I go to that website and check that questionmark I see the tooltip perfectly.
    I tested both FF and chrome (can't test IE as I'm a proud Ubuntu user. try it out!), what browser are you using? which version? what OS?
    Thanks

  15. AgentJay
    Member
    Posted 9 months ago #

    In FF it does seem to work perfectly! (I didn't check it before)
    But in Chrome it's still flashing, I also just noticed that it is not offsetting either (the tool tip box is loading with the mouse pointer in the center of the box, making the box appear too low)

    I'll also look into some CSS code to see if there's something that can be done.

    My chrome version is: Version 28.0.1500.72 m (the latest one according to the updater)

  16. ItayXD
    Member
    Plugin Author

    Posted 9 months ago #

    I'm using version 28.0.1500.52, there shouldn't be any difference...
    What OS are you using? that is very weird that such a difference exists

  17. AgentJay
    Member
    Posted 9 months ago #

    I'm using windows 8.

    It is rather strange. I haven't been able to find anything out of the ordinary so far in the code. I'll start trying on friends computers.

  18. ItayXD
    Member
    Plugin Author

    Posted 9 months ago #

    Have you find anything? Since I can't recreate your problem I really can't help...

  19. djchrono
    Member
    Posted 9 months ago #

    Hello, I believe I am getting a similar problem. When I mouseover the tooltip, it flashes. It appears to be happening in chrome, firefox and ie on my computer. Here is the page I am testing on: http://scentlog.com/amouage/

    Thanks for any help.

  20. jupp25
    Member
    Posted 9 months ago #

    hi,

    I think I have the same problem, but I would call it bouncing on the hover edge, because when I change the bottom-border size to say 20px the hover erea enlarges.
    isnt it possible to have the complete "text" field for hovering?

    so, any news for help?

    please check at the bottom of the page http://www.spencertrainment.de

    thx

  21. jupp25
    Member
    Posted 9 months ago #

    just checked, happens for me in firefox 22, chrome 28 works

  22. ItayXD
    Member
    Plugin Author

    Posted 8 months ago #

    Hi all thank you all for reporting, I was finally able to see the problem.
    This is officially marked as "not solved" and I'll start working on it.
    I'd appreciate if you'll write a review about the plugin after I'll fix it.

  23. ItayXD
    Member
    Plugin Author

    Posted 8 months ago #

    The only page I could reproduce the problem on is: http://scentlog.com/amouage/
    It seems to happen when your mouse is still on the element area and going over the tip element. What happens then is:
    Mouse over the original element=>Tip shows up=>Mouse over tip element which means the mouse is not over the original element=>Tip disappear=>Mouse is over the original element=>...
    Which result in the flickering. I'll look into it and try to solve it.
    ATM I think that making the tip element a child of the original element will solve the problem.
    Unfortunately I don't have the to work on it right now, if anyone works on it you can submit a pull request on github, if it will work I'll upload it here.
    Thanks everyone for reporting.

  24. abylund
    Member
    Posted 8 months ago #

    I am having the same problem.

    On this page:
    http://www.everydaymissionaries.org/dont-judge

    When you click on the "Share an Exprience With This Principle" button, you will see the word email. This word should have a tooltip but it is not working all I can see is a question mark.

  25. ItayXD
    Member
    Plugin Author

    Posted 8 months ago #

    This is not the same problem. Please open another topic. Please read the topic before posting in it.
    Your specific problem is not a plugin bug, but rather a problem of compatibility with your website. I can help you solve it as a private client.

  26. ItayXD
    Member
    Plugin Author

    Posted 8 months ago #

    Hi there all, I finally had time to find a solution, add this to your stylesheet:

    #tooltip {
    pointer-events: none;
    }

    Should solve the problem...
    I'll release an update soon

  27. jupp25
    Member
    Posted 7 months ago #

    jep, fixed. works for me.
    thx!

Reply

You must log in to post.

About this Plugin

About this Topic

Tags