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.

enter image description here


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


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

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


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.