Remove ToolTips from User Registration

More
10 years 7 months ago #31927 by oneforpeace
I'm using Hot Flashes for J3. I've added in a discussion board/Forum component, Agora Pro. All appears to work well save the User Registration, Forgot Username, and Forgot Password forms.

All of these forms are using tooltips (hasTooltip). The display of the tooltips is horrendous. I've experimented with CSS for hours trying to get them to look better, but have been unsuccessful. I'm at the point where I just want to remove/disable them.

Please, if possible, can someone suggest a way I can do that? Thanks!

Please Log in to join the conversation.

More
10 years 7 months ago #31935 by ivan.milic
Best you ask component vendor to tell you class names so you could style them. You can try to check them using chrome "Inspect Element" option to inspect HTML and find their class names. We ca also throw a look if you send us link

Please Log in to join the conversation.

More
10 years 7 months ago #31950 by oneforpeace
The three forms I referenced are native to the component, com_users, which was installed with the hot flashes template. I did not have a use for that component, but for back end administration, until I added the Forum component.

The script is loaded on every page of the site, including the home page....
Code:
<script type="text/javascript"> window.addEvent('domready', function() { $$('.hasTip').each(function(el) { var title = el.get('title'); if (title) { var parts = title.split('::', 2); el.store('tip:title', parts[0]); el.store('tip:text', parts[1]); } }); var JTooltips = new Tips($$('.hasTip'), {"maxTitleChars": 50,"fixed": false}); }); window.addEvent('load', function() { new JCaption('img.caption'); }); </script>

This script is appended (added to) when any one of the three forms is loaded. For example:
Code:
<script type="text/javascript"> window.addEvent('domready', function() { $$('.hasTip').each(function(el) { var title = el.get('title'); if (title) { var parts = title.split('::', 2); el.store('tip:title', parts[0]); el.store('tip:text', parts[1]); } }); var JTooltips = new Tips($$('.hasTip'), {"maxTitleChars": 50,"fixed": false}); }); function keepAlive() { var myAjax = new Request({method: "get", url: "index.php"}).send();} window.addEvent("domready", function(){ keepAlive.periodical(3600000); }); jQuery(document).ready(function() { jQuery('.hasTooltip').tooltip({"container": false}); }); </script>

You are welcome to look at the development site here... www.technicalink.info/commonsenseuncommo...nt/users/?view=reset

Please Log in to join the conversation.

More
10 years 7 months ago #31955 by ivan.milic
This is how tooltip html looks like:
Code:
<div class="tooltip fade top in" style="top: 197.546875px; left: 0px; display: block; position: fixed;"><div class="tooltip-arrow" style="left: 34.06362545018007%;"></div><div class="tooltip-inner"><strong>Email Address</strong><br>Please enter the email address associated with your User account.<br>A verification code will be sent to you. Once you have received the verification code, you will be able to choose a new password for your account.</div></div>

class .hasTooltip is added to label that has tool-tip

This should be enough for you to add styles. One thing you must first add is:

.tooltip{
position:fixed;
}
The following user(s) said Thank You: oneforpeace

Please Log in to join the conversation.

More
10 years 7 months ago #31957 by oneforpeace
Thanks Ivan. I'll give that a shot.

I'm curious though, I've looked and looked in both Firebug and Chrome Inspect Element and not found anything that looks like the "tooltip html" code you posted. Where/how did you find that?

Please Log in to join the conversation.

More
10 years 7 months ago #31968 by oneforpeace
Ahhhhh... I found it, the "tooltip html" code you posted Ivan. It appears in Chrome - Inspect Element. Firebug? I can't find it, if it's there at all.

Funny, I've been experiencing a lot of grief due to Chrome's "sticky cache," so I switched to using FireFox. Now I'm seeing that Chrome's developer tool is easier to use, and presents more useful info than Firebug. I guess I should get used to opening, testing, and developing using both; and that in addition to IE; what a pain.

Anyway, I added the following to layout.css:
Code:
.tooltip{ position:fixed; visibility:hidden; }

It works!

I tried display:none; and that did not work. I tried moving the tooltip around with margins and padding and those did not work either. I'm happy to just get rid of the tooltips; these three forms, as well as the site overall, does not need them anyway.

Great template and support. Thanks again!

Please Log in to join the conversation.

Time to create page: 0.304 seconds
Powered by Kunena Forum