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.


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

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


.tooltip.wrapper {
    @_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

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">
    <span class="item options tooltip content">
        <p>Read more about that here in the popup tooltip</p>

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?


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>

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

4 Answers 4


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>

Add following code is in less file.

.demo-tooltip {

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
    Commented Sep 19, 2017 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 Commented Sep 20, 2017 at 8:04
  • in which/where the the code need into the less file
    – senthil
    Commented May 24, 2018 at 9:00
  • I am trying this in Magento 2.2.5, but its not working for me. Any help will be appreciated. Commented Sep 14, 2018 at 7:05
  • I try in magento 2.2.6 but it's not working Commented Nov 2, 2018 at 5:37

Please follow below steps.

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


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

& when (@media-common = true) {
    .tooltip {

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


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>

Step-6: Run below command.

php bin/magento setup:upgrade
  • I have added it to custom.css which is already present in phtml. But it shows whole text like "Hover? Demo text here" It shows Unknown property name when tried to inspect the class. Commented Nov 4, 2019 at 19:46

I've found another way to add tooltip in Magento 2. It is already styled. Tested on Magento 2.4.

        <div class="field-tooltip toggle">
            <span class="field-tooltip-action action-help"
                  data-bind="mageInit: {'dropdown':{'activeClass': '_active'}}" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false"></span>
                <div class="field-tooltip-content" data-target="dropdown" aria-hidden="true">
                    Some content text here...
  • Is there any way to open on hover? Commented May 11 at 4:18

bootstrap tooltip

<i data-toggle="tooltip"
   data-original-title="Please enter your information.">
        ], function($) {

            $( function (){

if you need html in the tooltip: $('[data- toggle="tooltip"]').tooltip({html:true});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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