Easy Profile - Joomla Extension

Hi,
Thank you again for your help
Regards

Hi,
I have added this code to parameter "Before </body>" and works

<script>

jQuery(document).ready(function(){

	jQuery(".hasPopover").popover('dispose').popover({"html": true,"container": "body","placement":"top"});

	jQuery('.controls').hover(function(){jQuery(this).closest('.control-group').find('.hasPopover').popover('show');});

	jQuery('.controls').mouseout(function(){jQuery(this).closest('.control-group').find('.hasPopover').popover('hide');});

    });

</script>

NOTE: I have made it only for template french version

Hi,

Is my request clear?

I think yes, see video at https://youtu.be/EyN01brpT-E

It does not work. I put it in user.js and custom code "helix Ultimate"

Unfortunately I can only try to inject code with a browser console in runtime (as you can see in the video), I can't check this code with a real document ready trigger without access to your backend.

Try this code:

jQuery(function ($) {

    jQuery(document).ready(function(){

	jQuery(".hasPopover").popover('dispose').popover({"html": true,"container": "body","placement":"top"});

	jQuery('.controls').hover(function(){jQuery(this).closest('.control-group').find('.hasPopover').popover('show');});

	jQuery('.controls').mouseout(function(){jQuery(this).closest('.control-group').find('.hasPopover').popover('hide');});

    });

});

if also this code will not works then I need to have backend access to make some test.

Hi,
First of all thank you for answering. If it was urgent I will tell you.
This is an improvement of the user experience. If he is happy, I am happy and happy with your services :-)

It does not work. I put it in user.js and custom code "helix Ultimate"

Is my request clear?
Few users will spend the mouse on the title (by chance!) To have information. When entering a data, it is at this moment that it is interesting to give it this information
Regards

Hi,
sorry for late reply, today we was very busy.

Joomla uses Bootstrap 3 Javascript but your template override Joomla built-in Bootstrap with version 4.

Tooltips are a part of Bootstrap Popover library.

Try this code:

jQuery(function ($) {

	jQuery(".hasPopover").popover('dispose').popover({"html": true,"container": "body","placement":"top"});

	jQuery('.controls').hover(function(){jQuery(this).closest('.control-group').find('.hasPopover').popover('show');});

	jQuery('.controls').mouseout(function(){jQuery(this).closest('.control-group').find('.hasPopover').popover('hide');});

});

Hi,
Is the last js file for me?
Does it work for you?
I put it in custom code template "helix Ultimate" or user.js
It does not work
Regards

Hi,
you can do this by adding following Javascript code:

jQuery(document).ready(function(){

	jQuery(".hasPopover").popover('destroy').popover({"html": true,"container": "body","placement":"top"});

	jQuery('.controls').hover(function(){jQuery(this).closest('.control-group').find('.hasPopover').popover('show');});

	jQuery('.controls').mouseout(function(){jQuery(this).closest('.control-group').find('.hasPopover').popover('hide');});

});

Hi,

Yes I did this once but I can not do it for all because it takes up too much space!
css?

Hi,
you can add your description above the field with HTML delimiter field type

Hello,
To make appear the bubble of information above the field would be cool! because a novice does not necessarily have the idea of ​​hovering over the title
Is it possible (without css preferably) ?
Regards

Hi,
you can add a tooltip with the field description or an HTML delimiter field type to add a description in field position.

Tooltip: see screenshot 1 and 2
HTML delimiter: here the docs http://docs.easy-profile.com/index.php/article/html-delimiter-field-type

Another alternative is to use a CSS code to add a style, for example if you want to show Public icon then on fields with alias "interests" and "description" then you can add following css code to your template:

.control-group.interests-group:before,

.control-group.description-group:before{

    content: "\f0c0";

    font-family: 'jsn-icons'!important;

    speak: none;

    font-style: normal;

    font-weight: 400;

    font-variant: normal;

    text-transform: none;

    line-height: 1;

    -webkit-font-smoothing: antialiased;

    color:#008000;

    position:absolute;

    right:0px;

    left:auto;

    margin:10px;

}