Changing CSS for contact form tooltip

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
arvendal
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 123
Joined: Wed Mar 28, 2007 1:19 pm
Location: Sweden

Changing CSS for contact form tooltip

Postby arvendal » Thu Apr 13, 2017 8:59 am

Hi,
I am creating a template for my website "from scratch" and I can't find the CSS classes that's connected to the tooltips in Joomla's own contact form. This is my result up till now:

joomla-contact.png


The tooltip to the right of the field label "Name" needs to have a different background.

I tried to figure out the classes by using Firebug etc, but I cannot locate them. Thanks in advance.

Best rgds
You do not have the required permissions to view the files attached to this post.

SharkyKZ
Joomla! Guru
Joomla! Guru
Posts: 757
Joined: Fri Jul 05, 2013 10:35 am
Location: Unknown

Re: Changing CSS for contact form tooltip

Postby SharkyKZ » Thu Apr 13, 2017 1:08 pm

Tooltips are created by Bootstrap's JavaScript. Default tooltip HTML looks like this:

Code: Select all

<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>


http://getbootstrap.com/2.3.2/javascript.html#tooltips

arvendal
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 123
Joined: Wed Mar 28, 2007 1:19 pm
Location: Sweden

Re: Changing CSS for contact form tooltip

Postby arvendal » Thu Apr 13, 2017 1:50 pm

Thanks SharkyKZ for your swift reply,

but I still can't find a way to adjust the CSS for the Joomla forms. Attributing values to the classes "tooltip" and "tooltip-inner" makes no difference for me.

I don't use Bootstrap. And when I search through all Joomla 3.6.5 installation files I cannot find the string:

Code: Select all

div class="tooltip"


I am probably doing something wrong. But where exactly in the Joomla core php files is the code that generates the tooltip? Has there been any change in recent versions of Joomla? I have looked into the folder components\com_contact\views\contact\tmpl but the file default_form.php doesn't seem to contain any obvious code for this purpose.

I must be missing something.

Best rgds

SharkyKZ
Joomla! Guru
Joomla! Guru
Posts: 757
Joined: Fri Jul 05, 2013 10:35 am
Location: Unknown

Re: Changing CSS for contact form tooltip

Postby SharkyKZ » Thu Apr 20, 2017 12:58 pm

Like I said, popovers (and tooltips) are created by Bootstrap's Javascript. That's why you can't find anything in PHP files.This JS snippet enables Bootstrap's popovers for HTML elements with hasPopover class:

Code: Select all

jQuery(function($){ $(".hasPopover").popover({"html": true,"trigger": "hover focus","container": "body"}); });


The popover content is derived from HTML element's title and data-content attributes.

You can check Protostar's CSS to see what styling is applied to popovers https://github.com/joomla/joomla-cms/bl ... .css#L4103

arvendal
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 123
Joined: Wed Mar 28, 2007 1:19 pm
Location: Sweden

Re: Changing CSS for contact form tooltip

Postby arvendal » Thu Apr 20, 2017 3:23 pm

Thanks SharkyKZ,
it took awhile for me to understand, but now I see what you meant. I was confused by the fact that I do not use Protostar and I don't connect my template to Bootstrap, but the popover code is generated when the webpage is generated. Now I can create my "overrides" for my template.

Thanks for your help!

Best rgds


Return to “Templates for Joomla! 3.x”

Who is online

Users browsing this forum: freedziner and 10 guests