Field description as tooltip

[gebeer]

I have searched the forum and google but couldn't find anything related.

I want to show all field descriptions in admin forms as tooltips. Has this request really not come up before?

I imagine a module that hooks into the Inputfield class, adds the description as title value to the inputfield and then makes use of https://jqueryui.com/tooltip/.

Am I on the right track here?

EDIT:

I made a module "InputfieldHookAddTitle":

<?php

class InputfieldHookAddTitle extends WireData implements Module {

	public static function getModuleInfo() {	
		return array(
			'title' => 'Inputfield Hook Add Title',
			'version' => 100,
			'summary' => 'Adds title attribute to inputfields with field description as value',
			'singular' => true,
			'autoload' => true,
			);
	}
	
	public function init() {
		$this->addHookBefore('Inputfield::render', $this, 'addTitle'); 
	}
	
	public function addTitle(HookEvent $event) {
		$inputfield = $event->object;

		if ($inputfield->description == "") return;
		
		$inputfield->setAttribute('title', $inputfield->description);

		$event->return;
	}
	
}

This adds title attribute with value description to inputfields.

Now I need to get rid of the original <p class="description"> tag which is set in the constructor method. How would I unset this? I don't see a unset method.

And how do I add the Jquery tooltip js?

EDIT:

I managed to add the custom JS to the admin pages, thanks to Soma's blog post.

In my site/templates/admin.php I added:

// add tooltip JS to admin pages
$modules->get('JqueryCore');
$modules->get('JqueryUI');
$config->scripts->add($config->urls->templates . "js/admintooltips.js");

and the admintooltips.js

$(function() {
    var tooltips = $( "[title]" ).tooltip({
      position: {
        my: "left top",
        at: "right+5 top-5"
      }
    });
});

Now I only need to get rid of the original description. Any pointers would be much appreciated.

[LostKobrakai]

You're looking for the wrong render function. Inputfield::render is the abstract function that every inputfields overwrites with it's own. What you're looking for is InputfieldWrapper::render.  

[gebeer]

@LostKobrakai

Thank you. I already had a look at InputfieldWrapper.php and am currently trying to add my hook there. Will report back with results or questions.

[LostKobrakai]

InputfieldWrapper::render is quite a beast of a function. Either you try to edit the markup strings of $defaultMarkup or if that isn't enough for your case it's most likely the easiest to modify the markup after the function is done. 

[gebeer]

That is a beast, indeed.

And I'm quite new to PW modules. Have read the documentation. But don't no how to access $defaultMarkup in this case. The $event->object is of type InputfieldForm with lots of protected and private properties. Any help would be much appreciated.

[LostKobrakai]

Look at $form->setMarkup(). 

[gebeer]

How can I access $defaultMarkup from within my hook:

	public function init() {
		$this->addHookBefore('Page::render', $this, 'addTooltipJS'); 
		$this->addHookBefore('InputfieldWrapper::render', $this, 'addTooltip'); 
	}
	
	public function addTooltip(HookEvent $event) {
		$defaultMarkup =  ;

		$event->return;
	}

[LostKobrakai]

You don't need to access it. Copy the array to your module, remove the keys you don't need to change, change the markup of the leftover ones, set it to the form with the mentioned function.

To get the form you need to use an other hook as InputfieldWrapper::render, which is not aware of the form it belongs to. The wrapper hook would rather be needed if you need to change the markup directly and not via the $defaultMarkup array.

[gebeer]

Thank you for your patience with an OOP noob.

I don't know how I would copy the array to my module. So some example code would be great. So that I can go on from there with removing keys etc.

[LostKobrakai]

I'm talking about actual copy&past of the array. Nothing fancy here.

$this->addHookBefore('InputfieldForm::render', $this, 'modifyMarkup');

public function modifyMarkup($event){
  $form = $event->object;

  $form->setMarkup($yourModifiedMarkupArray);
}

[Juergen]

I use the following code from above to show tooltipps if I hover over an input field.

<?php
class InputfieldHookAddTitle extends WireData implements Module {
	public static function getModuleInfo() {	
		return array(
			'title' => 'Inputfield Hook Add Title',
			'version' => 100,
			'summary' => 'Adds title attribute to inputfields with field description as value',
			'singular' => true,
			'autoload' => true,
			);
	}
	public function init() {
		$this->addHookBefore('Inputfield::render', $this, 'addTitle');
    $this->addHookBefore('InputfieldForm::render', $this, 'modifyMarkup'); 
	}
	public function addTitle(HookEvent $event) {
		$inputfield = $event->object;
		if ($inputfield->description == "") return;
		$inputfield->setAttribute('title', $inputfield->description);
		$event->return;
	}
public function modifyMarkup($event){
  $form = $event->object;
  $modifiedMarkupArray = array(
		'list' => "\n<ul {attrs}>\n{out}\n</ul>\n",
		'item' => "\n\t<li {attrs}>\n{out}\n\t</li>", 
		'item_label' => "\n\t\t<label class='InputfieldHeader ui-widget-header{class}' for='{for}'>{out}</label>",
		'item_label_hidden' => "\n\t\t<label class='InputfieldHeader InputfieldHeaderHidden ui-widget-header{class}'><span>{out}</span></label>",
		'item_content' => "\n\t\t<div class='InputfieldContent ui-widget-content{class}'>\n{out}\n\t\t</div>", 
		'item_error' => "\n<p class='InputfieldError ui-state-error'><i class='fa fa-fw fa-flash'></i><span>{out}</span></p>",
		'item_description' => "", 
		'item_head' => "\n<h2>{out}</h2>", 
		'item_notes' => "\n<p class='notes'>{out}</p>",
		'item_icon' => "<i class='fa fa-{name}'></i> ",
		'item_toggle' => "<i class='toggle-icon fa fa-angle-down' data-to='fa-angle-down fa-angle-right'></i>", 
		// ALSO: 
		// InputfieldAnything => array( any of the properties above to override on a per-Inputifeld basis)
		);
  $form->setMarkup($modifiedMarkupArray);
}
}

It works quite well, but I would prefer to show the tooltipps by hovering over the label instead of the inputfield. Is that possible and how?

Best regards

[rick]

Add the TITLE attribute to the label with the same content?

[Juergen]

For the moment the hook adds the field description as a title attribut to the form input element (f.e a textfield). By hovering of the input field the field description will be shown as the tooltip.

But I want to show the tooltip by hovering over the label of the input element instead of the input field.

[krisj]

I remember having this functionality enabled in some module already. Can't remember which one. I thought it was Tracy but can't find it right now...

[krisj]

OK found it - /wire/templates-admin/scripts/inputfields.js

line 1015

It is already in the core! The way you enable it is by having $config->debug = true;

of course it would be nice to have it optionally on when debug is off too as I find it very useful.

https://github.com/rolandtoth/AdminOnSteroids uses its variation too but to enable just this little thing thats already part of the core AOS is a bit of an overkill to say the least..