Jump to content

Field description as tooltip


gebeer
 Share

Recommended Posts

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.

  • Like 1
Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;
	}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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);
}
  • Like 1
Link to comment
Share on other sites

  • 8 months later...

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...