Jump to content
gebeer

Field description as tooltip

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

Share this post


Link to post
Share on other sites

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.  

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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;
	}

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By kongondo
      FieldtypeRuntimeMarkup and InputfieldRuntimeMarkup
       
      Modules Directory: http://modules.processwire.com/modules/fieldtype-runtime-markup/
      GitHub: https://github.com/kongondo/FieldtypeRuntimeMarkup
      As of 11 May 2019 ProcessWire versions earlier than 3.x are not supported
      This module allows for custom markup to be dynamically (PHP) generated and output within a page's edit screen (in Admin).
       
      The value for the fieldtype is generated at runtime. No data is saved in the database. The accompanying InputfieldRuntimeMarkup is only used to render/display the markup in the page edit screen.
       
      The field's value is accessible from the ProcessWire API in the frontend like any other field, i.e. it has access to $page and $pages.
       
      The module was commissioned/sponsored by @Valan. Although there's certainly other ways to achieve what this module does, it offers a dynamic and flexible alternative to generating your own markup in a page's edit screen whilst also allowing access to that markup in the frontend. Thanks Valan!
       
      Warning/Consideration
      Although access to ProcessWire's Fields' admin pages is only available to Superusers, this Fieldtype will evaluate and run the custom PHP Code entered and saved in the field's settings (Details tab). Utmost care should therefore be taken in making sure your code does not perform any CRUD operations!! (unless of course that's intentional) The value for this fieldtype is generated at runtime and thus no data is stored in the database. This means that you cannot directly query a RuntimeMarkup field from $pages->find(). Usage and API
       
      Backend
      Enter your custom PHP snippet in the Details tab of your field (it is RECOMMENDED though that you use wireRenderFile() instead. See example below). Your code can be as simple or as complicated as you want as long as in the end you return a value that is not an array or an object or anything other than a string/integer.
       
      FieldtypeRuntimeMarkup has access to $page (the current page being edited/viewed) and $pages. 
       
      A very simple example.
      return 'Hello'; Simple example.
      return $page->title; Simple example with markup.
      return '<h2>' . $page->title . '</h2>'; Another simple example with markup.
      $out = '<h1>hello '; $out .= $page->title; $out .= '</h1>'; return $out; A more advanced example.
      $p = $pages->get('/about-us/')->child('sort=random'); return '<p>' . $p->title . '</p>'; An even more complex example.
      $str =''; if($page->name == 'about-us') { $p = $page->children->last(); $str = "<h2><a href='{$p->url}'>{$p->title}</a></h2>"; } else { $str = "<h2><a href='{$page->url}'>{$page->title}</a></h2>"; } return $str; Rather than type your code directly in the Details tab of the field, it is highly recommended that you placed all your code in an external file and call that file using the core wireRenderFile() method. Taking this approach means you will be able to edit your code in your favourite text editor. It also means you will be able to type more text without having to scroll. Editing the file is also easier than editing the field. To use this approach, simply do:
      return wireRenderFile('name-of-file');// file will be in /site/templates/ If using ProcessWire 3.x, you will need to use namespace as follows:
      return ProcessWire\wireRenderFile('name-of-file'); How to access the value of RuntimeMarkup in the frontend (our field is called 'runtime_markup')
       
      Access the field on the current page (just like any other field)
      echo $page->runtime_markup; Access the field on another page
      echo $pages->get('/about-us/')->runtime_markup; Screenshots
       
      Backend
       

       

       
      Frontend
       

    • By kongondo
      Visual Page Selector
      Released 31 March 2016
      https://processwireshop.pw/plugins/visual-page-selector/
        As of 04 January 2018 ProcessWire versions earlier than 3.x are not supported   *******************************************************   ORIGINAL POST   ******************************************************* Introducing VPS, a commercial visual page field selector. 
      This is a pre-sale closed-beta version. This post is WIP and will be updated now and then.
      ############################
      Many ProcessWire users use the 'one image per page' principle to manage and reuse images across their sites. This works fine. However, for site editors who mainly work with images, especially for larger sites, it is sometimes difficult to remember the pages where particular images reside. This module helps to solve this challenge.
      Harnessing the awesomeness  that is ProcessWire, VPS provides a rich editing experience, enabling editors to search for, view, select, add, remove and delete page-images easily, in an easy to use and friendly interface. ProcessWire Lister is the workhorse behind the lightning-fast searches. Editors will be able to search for images by their descriptions, names, partial names, page names, templates, etc. 
      Current Features
      Single-image mode Full search Batch add/Remove/Delete Image/Delete Page in page fields Image Browser Selectable pages as per page field settings + Lister filters Grid and List View Draggable sorting Responsive (almost fully ..iframes!) Planned Features
      Multi-image mode (there are times you want to group similar images in multi-image field in one page; e.g. the back, front and side of a car photo) Configurable CSS on the fly resizing vs real image resizing (image resizing can quickly hog memory) Other as per feedback from beta testing FAQs
      When will this be available? 
      Soon.
      How much will it cost?
      Reasonably priced. Announcement soon.
      Where will I be able to buy this from?
      At all fine stores that stock quality ProcessWire products
      Do we really need another page field/inputfield select?
      See links below.
      What type of licenses will be available?
      Soon to be announced.
      Can I beta test this?
      Thanks for the interest but all available slots have been taken.
      Video (excuse the video quality please - too many takes....)
       
      Screens






      Previous Discussions
      https://processwire.com/talk/topic/10927-wishlist-select-pages-by-thumbnail/
      https://processwire.com/talk/topic/4330-get-image-from-other-pages-via-images-field/ https://processwire.com/talk/topic/417-extending-image-field/?p=6982 https://processwire.com/talk/topic/7073-profield-table-and-gallery/ https://processwire.com/talk/topic/3200-image-management-concerns-is-processwire-suitable-for-me/ https://processwire.com/talk/topic/425-file-manager/ https://processwire.com/talk/topic/10763-asset-manager-asset-selector/
    • By kongondo
      FieldtypeMatrix and InputfieldMatrix
      Modules Directory: http://modules.processwire.com/modules/fieldtype-matrix/
      GitHub: https://github.com/kongondo/FieldtypeMatrix 
      The module Matrix enables you to save data from a 2D-Matrix table. The rows and columns of the matrix table are made up of pages retrieved via a ProcessWire selector or via a page field selection of parent pages. The matrix values are made up of the data input in the matrix cells, i.e. the 'intersection of rows and columns'.
       
      Example Usage
      You have Products whose prices vary depending on colour, size, material, etc. Using the Fieldtype, you can create a table with rows made up of colours and columns made up of sizes the combination of each making up their respective values (in this case price). So rather than creating multiple text fields to do the following:
      Colour Size Price Red Small £10 Red Medium £20 Red Large £30 Red X-large £35 Green Small £9 Green Medium £15 Etc... You can instead have the following in one field:
      Small Medium Large X-Large Red £10 £20 £30 £35 Green £9 £15 Blue Etc... Yellow Purple If you set a selector in the Field's settings, to retrieve pages to build your matrix's rows and columns, it follows that all pages using the template the Fieldtype is attached to will have identical rows and columns. In some cases, this could be the intention. For instance, you might have 'Car' pages, e.g. Audi, Volvo, Ford, Citroen, Mazda, BWM, etc., each of which uses a 'Cars' template that has a single FiedltypeMatrix called 'car_attributes'. If you set a selector to build the Fieldtype's rows and columns, your users can easily compare the cars based on a combination of different values. The following matrix table best illustrates this:
      Type Engine Size Fuel Efficiency Carbon Emissions Warranty Road Tax Price 1994 Audi brand 1 values, etc. 2000 Audi brand 2 2006 Audi brand 3 2012 Audi brand 4 Each of your car pages would have similar matrices. 
      This allows you to make easy but powerful queries. Such a setup allows you to compare within and across car brands. Say you wanted to find out which car(s) offered the best value for money given certain parameters such as warranty, emissions etc. You can easily make such comparisons (see code below). You can also compare within one car type, e.g. which brand of BMWs does best in what area...The possibilities are endless.

      In the database, Rows and column pages data are stored as their respective page->id. Matrix-values store any data (varchar(255)).
       
      If instead you wanted a template's pages to each have a matrix built of different rows and columns, you would have to name a Multiple Page Field (attached to the same template as the as your matrix field) in the matrix field's settings. When editing those pages, your matrix table's rows and columns will be built using the published children pages of the 2 pages you select in the Multiple page field..
       
      The module allows the creation of matrix tables of any sizes (rows x columns). The rows and columns dynamically grow/shrink depending on the addition of row/column pages that match what you set in the matrix field's settings (see its 'Details Tab'). Please note that, if such pages are deleted/trashed/hidden/unpublished, their data (and presence) in the matrix are also deleted.
      Entering values in the matrix
      You have three choices:
      Manually entry Uploading a comma delimited (CSV) file. This can be delimited by other characters (tab, pipe, etc); not just commas Copy-pasting CSV values. (Tip: you can copy paste directly from an Excel spreadsheet. Such values will be 'tab-delimited'). In addition, if your server supports it, in the field's settings, you can enable the use of MySQL's fast LOAD DATA INFILE to read and save your submitted CSV values.
      Note that for large tables, you may have to increase your PHP's max_input_vars from the default 1000 otherwise PHP will timeout/return an error and your values will not be saved. I have successfully tested the module with up to ~3000+ values (10x350 table), the Fieldtype is not really optimised (nor was it intended) to handle mega large matrix tables. For such, you might want to consider other strategies. 
       
      Install
      Install as any other module.
       
      API + Output
      A typical output case for this module would work like this:
       
      The matrix's rows, columns and values are subfields of your matrix's field. So, if you created a field called 'products' of the type FieldtypeMatrix, you can access as:

      product.row, product.column and product.value respectively
       
      foreach($page->matrix as $m) { echo " <p> Colour: $m->row<br /> Size: $m->column<br /> Price: $m->value </p> "; } Of if you want to output a matrix table in the frontend: 
       
      //create array to build matrix $products = array(); foreach($page->matrix as $m) $products[$m->row][$m->column] = $m->value; $tbody ='';//matrix rows $thcols = '';//matrix table column headers $i = 0;//set counter not to output extraneous column label headers $c = true;//set odd/even rows class foreach ($products as $row => $cols) { //matrix table row headers (first column) $rowHeader = $pages->get($row)->title; $tbody .= "<tr" . (($c = !$c) ? " class='even' " : '') . "><td class='MatrixRowHeader'>" . $rowHeader . "</td>"; $count = count($cols);//help to stop output of extra/duplicate column headers foreach ($cols as $col => $value) { //matrix table column headers $columnHeader = $pages->get($col)->title; //avoid outputting extra duplicate columns if ($i < $count) $thcols .= "<th class='MatrixColumnHeader'>" . $columnHeader . "</th>"; //output matrix values $currency = $value > 0 ? '£' : ''; $tbody .= "<td>" . $currency . $value . "</td>"; $i++; } $tbody .= "</tr>"; } //final matrix table for output $tableOut = "<table class='Matrix'> <thead> <tr class=''> <th></th> $thcols </tr> </thead> <tbody> $tbody </tbody> </table>"; echo $tableOut; The module provides a default rendering capability as well, so that you can also do this (below) and get a similar result as the first example above (without the captions). 
      echo $page->matrix; Or this
      foreach($page->matrix as $m) { echo $m; } Finding matrix items
      The fieldtype includes indexed row, column and value fields. This enables you to find matrix items by either row types (e.g. colours) or columns (e.g. sizes) or their values (e.g. price) or a combination of some/all of these. For instance:
      //find all pages that have a matrix value of less than 1000 $results = $pages->find("products.value<1000"); //find some results in the matrix (called products) of this page $results = $page->products->find("column=$country, value=Singapore");//or $page->products->find("column=$age, value>=25"); //$country and $age would be IDs of two of your column pages Other more complex queries are possible, e.g. find all products that are either red or purple in colour, come in x-large size and are priced less than $50.

      Credits
      @Ryan on whose Fieldtype/InptufieldEvents this is largely based
      @charger and @sakkoulas for their matrix ideas
       
      Screens
       
      Field Details Tab

       
      Inputfield

      Larger matrix table

       
      Example output

    • By Pravin
      How to set the image quality as per desired..
      I tried using the above code but I get the original image size..
      <!--Content with Image left--> <?php $i = 2; foreach($page->page_content as $each) { if( $i%2 == 0 ){ ?> <section class="imageblock about-1"> <div class="imageblock__content col-md-6 col-sm-4 pos-left animated fadeInLeft"> <div class="background-image-holder"> <?php $option1 = array( 'quality' => 60, 'upscaling' => true, 'cropping' => true, ); $pravin= $each->single_image->size(790,650,$option1); ?> <img alt="image" src="<?php echo $pravin->url; ?>" /> </div> </div> <div class="container container-body"> <div class="row"> <div class="col-md-5 col-md-push-7 col-sm-8 col-sm-push-4 animated fadeInUp"> <?php echo $each->body; ?> </div> </div> <!--end of row--> </div> <!--end of container--> </section> <!--Content with Image on left--> <?php } else { ?> <!--Content with Image on right--> <section class="imageblock about-1"> <div class="imageblock__content col-md-6 col-sm-4 pos-right animated fadeInRight"> <div class="background-image-holder"> <?php $pravin= $each->single_image->size(790,650,$option1); ?> <img alt="image" src="<?php echo $pravin->url; ?>" /> </div> </div> <div class="container container-body"> <div class="row"> <div class="col-md-5 col-sm-8 animated fadeInUp"> <?php echo $each->body; ?> </div> </div> <!--end of row--> </div> <!--end of container--> </section> <?php } ++$i; } ?> <!--Content with Image on right-->  
    • By [Code] Specialist
      Hi Folks,
      I like to develop a Backend Module with extra tabs and nested fields. Is there any Example Code for my Idea ? 
      The Module should create new fields, a new Tab and several fields on it. AND... Last but not least the fields depend on each other by rules like "if checkbox $a then unfold area with Textfield 1+2 "
      If someone have a snippet for me to learn ... it would be soooo great. Thanks. 
      Michael
×
×
  • Create New...