4

There isn't really a lot of questions about tool tips in Magento. I'm hoping someone can help me from pulling my hair out over this one.

I'm looking to have a simple tool tip pop up with some content I have in a theme I'm creating.

I've created a custom template in my Magento theme that calls a config setting, I've implemented the necessary code into my default.xml to display the text that shows in that config field in the back end. For this examples, lets say it says "FREE shipping". There are no problems here.

app/design/frontend/VENDOR/MY_THEME/Magento_Theme/templates/config_headergroup.phtml

<div class="header-notification">
    <?= $block->getConfig()->getValue('cpanelsection/headergroup/top_header_notification') ?>
</div>

I would like when they hover over the text they get a tooltip that pops up and gives them more info on that specific text box.

I've seen and played around with the tooltip library that comes with Magento 2, I assumed it would be easy to just have a tool tip but for some reason, I can't get it to show up.

I've removed the mobile class for this but this is the default tooltip.less file located in

vendor/magento/theme-frontend-blank/web/css/source/_tooltips.less

.tooltip.wrapper {
    .lib-tooltip(
    @_tooltip-position: bottom,
    @_tooltip-selector-content: ~'.tooltip.content',
    @_tooltip-selector-toggle: ~'tooltip.toggle'
    );

    .tooltip.content {
        dl {
            margin-bottom: 0;
        }

        dd {
            white-space: normal;
        }

        .subtitle {
            display: inline-block;
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 15px;
        }

        .label {
            margin-top: @indent__s;

            &:first-child {
                margin-top: 0;
            }
        }

        .values {
            margin: 0;
        }
    }
}

.ui-tooltip {
    position: absolute;
    z-index: 9999;
}

So my assumption is that if I format my template like this:

<div class="tooltip wrapper header-notification">
    <?= $block->getConfig()->getValue('cpanelsection/headergroup/top_header_notification') ?>
        <span class="item options tooltip content">
            Popup tool tip for more information about this text here
        </span>
</div>

It does not work though.

Attempts to making it work:

1) I've tried also mimicking from another template from the Multishipping module, I've take from that template and re crested it with the same format with no luck.

2) I've even placed the less styling in my layout.less in my custom theme and tried that way but nothing I seem to do works.

3) I've even added in a plain HTML part in my theme in the template but that doesn't even work so I must be doing somethign wrong and not caling it completely?

<div class="tooltip wrapper">
    <h2>TESTING</h2>
    <span class="item options tooltip content">
        <p>Read more about that here in the popup tooltip</p>
    </span>
</div>

I've been clearing my cache every time I make a change, so it can't be that.

Does anyone have some ideas a to what I'm doing wrong? Am I not understanding how tool tips work?

UPDATE:

Dava Gordon was able to help me out and it works no problem with the template I was adding but I can't seem to get it to work on the $welcomeMessage in the header.phtml

<span class="demo-tooltip demo-light">
                <a href="#" class="tooltip-toggle"><?= $block->escapeHtml($welcomeMessage) ?></a>
                <span class="tooltip-content">This is a config setting that can be easily changed to anything you would like in your theme settings</span>
            </span>

Is there something additional I have to do for this script?

11

This should work tested on 2.1.8

<span class="demo-tooltip">
    <a href="#" class="tooltip-toggle">Hover?</a>
    <span class="tooltip-content">Demo text here</span>
</span>

Add following code is in less file.

.demo-tooltip {
    .lib-tooltip(right);
}

And run php bin/magento setup:upgrade command.

  • This is awesome. Thank you. Are you able to help one more time and see how I might be able to apply this to the header.phtml to the $welcomeMessage? It works no problem on the template but not so much on the header. You can see my updated question at the bottom. – kia4567 Sep 19 '17 at 17:39
  • did you add the CSS for the tool tip? is it showing the text a screenshot of result of your code output would help alot – Dava Gordon Sep 20 '17 at 8:04
  • in which/where the the code need into the less file – senthil May 24 '18 at 9:00
  • I am trying this in Magento 2.2.5, but its not working for me. Any help will be appreciated. – Gaurav Agrawal Sep 14 '18 at 7:05
  • I try in magento 2.2.6 but it's not working – Chirag Patel Nov 2 '18 at 5:37
1

Please follow below steps.

Step-1: Create _custom.less file in your custom theme on below path.

app/design/frontend/VENDOR/THEMENAME/web/css/source/_custom.less

Step-2: Add following code in _custom.less file.

& when (@media-common = true) {
    .tooltip {
        .lib-tooltip(right);
    }
}

Step-3: Create _module.less file your custom theme on below path.

app/design/frontend/VENDOR/THEMENAME/web/css/source/_module.less

Step-4: Add following code in _module.less file.

@import '_custom.less';

Step-5: Add following code in your any .phtml file.

<span class="tooltip">
    <a href="javascript:void(0);" class="tooltip-toggle">Hover?</a>
    <span class="tooltip-content">Demo text here</span>
</span>

Step-6: Run below command.

php bin/magento setup:upgrade

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.