Easy Profile - Joomla Extension

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;

}

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 your description above the field with HTML delimiter field type

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 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,
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,
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,
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,

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,
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,
Thank you again for your help
Regards