Applying Magento 2 library tooltip to custom theme

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

bootstrap tooltip

<i data-toggle="tooltip"
   data-original-title="Please enter your information.">
</i>
<script>
require([
            'jquery',
        ], function($) {

            $( function (){
                $('[data-toggle="tooltip"]').tooltip();
            });
        });
</script>

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