hardcoded icon in e107::getForm()->help()

[Vodhin]

What e107 version are you using?

v2.3.3

Bug description

in form_handler.php

public function help($text){

line 3238 $ret .= '<i class="admin-ui-help-tip far fa-question-circle"><!-- --></i>';

The icon does not render with some themes. It looks like " far fa-question-circle" should be " fa fa-question-circle" I've corrected my own installations and everything seems fine

How to reproduce

try different themes

Expected behavior

icon should show

What browser(s) are you seeing the problem on?

Chrome / Brave

PHP Version

7.4.33

[tgtje]

Just info it appears on 4 febr. 2021 after a file rewrite (going from line 7xxxx to line 3xxxx) https://github.com/e107inc/e107/blob/82fbeab43c4d8c31c31f34ccfdd54e9dd5d5f8dd/e107_handlers/form_handler.php Iff typo ??

[tgtje]

Just remark ; far fa is an existing icon type : being a question mark ( ?) on a button.

[Moc]

I am pretty sure that the method e107::getForm()->help() is only used in the Admin UI. Are there are places in the Admin Area where the icon does not render?

It should be documented that this method is not to be used on frontend though, so keeping it open with documentation label. Or we can apply your adjustments so it's suitable frontend as well.

Thoughts @CaMer0n?

[Jimmi08]

@Moc Limit for admin only is not a solution. This can be needed on the frontend too. There should be toGlyph() used, not hardcoded HTML code. Or use an image instead icon.

[Moc]

I agree. It simply has been coded this way back in 2021. If it's meant to be used on frontend, indeed the toGlyph() method should be used.

[Vodhin]

I am pretty sure that the method e107::getForm()->help() is only used in the Admin UI. Are there are places in the Admin Area where the icon does not render?

It should be documented that this method is not to be used on frontend though, so keeping it open with documentation label. Or we can apply your adjustments so it's suitable frontend as well.

Thoughts @CaMer0n?

The e107::getForm()->help() does work on my non-admin forms. I've looked over my coding and I am sure I am not tricking my front end forms into thinking they are in an admin area and also checked to be sure they work with a non-admin user account. Personally I cannot see why it should only be in and admin area, it is a useful snippet for any form.

[Jimmi08]

Just note to this topic: if you use admin UI functionality on frontend, icon is rendered but tooltip is not working. Adding admin.jquery.js didn't help. I think it is because bootstrap5 theme

[Vodhin]

@Jimmi08 - I added my own JS to trigger the help:

PHP:

$frm = e107::getForm(false, true);
$text .= $frm->help("Some help text...");

JavaScript:

$(document).ready(function(){

  $('.admin-ui-help-tip').each(function(i,ele){
      $(ele).on({
        mouseenter : function(){$(ele).parent().find('div.field-help').fadeIn(200);},
        mouseleave : function(){$(ele).parent().find('div.field-help').fadeOut(200);}
        });
      });

  });

CSS:

.admin-ui-help-tip{
  padding-top: 2px;
  font-size: 18px;
  cursor: help;
  color: rgba(127, 127, 127, 0.7);
  float: right !important;
  margin-left: 5px;
  }

div.field-help{
  position:absolute;
  top:-10px;
  left:unset;
  right:28px;
  font-size:9pt;
  line-height:1.15em;
  color:#FFFFFF;
  background-color:rgba(64,64,64,0.85);
  padding: 6px;
  border-radius: 3px 3px 3px 3px;
  z-index:1500;
  box-shadow: 1px 1px 2px #0000009C;
  -webkit-box-shadow: 1px 1px 2px #0000009C;
  -moz-box-shadow: 1px 1px 2px #0000009C;
  }

[CaMer0n]

@Vodhin Does this fix it for you?

line 3238

$ret .= $this->tp->toGlyph('far-question-circle', ['class'=>'admin-ui-help-tip', 'placeholder'=>'<!-- -->']);

[Vodhin]

$ret .= $this->tp->toGlyph('far-question-circle', ['class'=>'admin-ui-help-tip', 'placeholder'=>'']);

Yes. This seems to work fine both in Admin Areas and with Front End forms.

Thank you.

EDIT: Does not render with Voux theme (my own fix to change far to fa also didn't work on Voux). probably needs the FA library loaded outside of this theme

[Vodhin]

Got the help icons to render correctly in the Voux theme by adding font: normal normal normal 14px/1 FontAwesome !important; to the CSS file is for my plugin. Should work in all themes, presumably.

.admin-ui-help-tip{
  padding-top: 2px;
  font: normal normal normal 14px/1 FontAwesome !important;
  font-size: 18px;
  cursor: help;
  color: rgba(127, 127, 127, 0.7);
  float: right !important;
  margin-left: 5px;
  }