Tooltip functionality in UI grid column Magento-2

Question

I need to add tooltip functionality in UI grid column for Magento-2. When hover on particular record which is available in that particular column then that record's description is display on tooltip. It's done already in Magento-1. I want same which is mention in below image for Magento-2.

Answer 1

For that you need to custom class to get description data in ui grid file.

VendorName/ModuleName/view/adminhtml/ui_component/vendorname_modulename_modulename_listing.xml

<column name="description" class="VendorName\ModuleName\Ui\Component\Listing\Column\Description">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/thumbnail</item>
            <item name="altField" xsi:type="string">name</item>
            <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
            <item name="filter" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Description</item>
            <item name="sortOrder" xsi:type="number">40</item>
        </item>
    </argument>
</column>

Create custom listing file for display tooltip on hover. You need to set description value in title attribute of img tag :

VendorName\ModuleName\Ui\Component\Listing\Column\Description.php

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

namespace VendorName\ModuleName\Ui\Component\Listing\Column;

class Description extends \Magento\Ui\Component\Listing\Columns\Column
{
    /**
     * Template
     */
    protected $template;

    /**
     * [__construct description]
     * @param \Magento\Framework\View\Element\UiComponent\ContextInterface $context            [description]
     * @param \Magento\Framework\View\Element\UiComponentFactory           $uiComponentFactory [description]
     * @param \Magento\Framework\View\Element\Template                     $template           [description]
     * @param array                                                        $components         [description]
     * @param array                                                        $data               [description]
     */
    public function __construct(
        \Magento\Framework\View\Element\UiComponent\ContextInterface $context,
        \Magento\Framework\View\Element\UiComponentFactory $uiComponentFactory,
        \Magento\Framework\View\Element\Template $template,
        array $components = [],
        array $data = []
    ) {
        $this->template = $template;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }

    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as &$item) {
                if (array_key_exists('description', $item)) {
                    $imageUrl = $this->template->getViewFileUrl("VendorName_ModuleName::images/description.gif");
                    $item['description'] = $item['description'];
                    $badgeArray = [];
                    $imagesContainer = '';
                    $imagesArray = [
                        [
                            'image_url' => $item['description'],
                        ],
                    ];
                    foreach ($imagesArray as $image) {
                        $imagesContainer = $imagesContainer . "<img alt='" . strip_tags($item['description']) . "' src=" . $imageUrl . "  title='" . strip_tags($item['description']) . "' style='display:inline-block;margin:2px;width:unset;border:none;'/>";
                    }
                    $item['description'] = $imagesContainer;
                }
            }
        }
        return $dataSource;
    }
}