Search code examples
javascripthtmltippyjs

How to use Button inside Tippy

I have a put a Button inside a Template that i added to my Tippy. How do i access the Button on JavaScript.

I tried using the .on('click') with JavaScript but it does'nt work.

This is my HTML

<div class="form-row">
    <div class="col-6">
        <div>
            <button type="button" name="test-button" class="form-control btn btn-danger">Testing</button>
        </div>
    </div>
    <div class="col-6">
        <div class="form-row">
            <div class="col-2">
                <button type="button" name="tippy" class="form-control btn btn-danger">A Button 1</button>
            </div>
            <div class="col-2">
                <button type="button" name="tippy" class="form-control btn btn-warning">A Button 2</button>
            </div>
        </div>
    </div>
</div>

My Template

<template id="template-test">
    <div class="form-row" style="width:300px;">
        <div class="col">
            <button type="button" name="test-button" class="form-control btn btn-danger">Button1</button>
        </div>
        <div class="col">
            <button type="button" name="test-button" class="form-control btn btn-warning">Button2</button>
        </div>
        <div class="col">
            <button type="button" name="test-button" class="form-control btn btn-success">Button3</button>
        </div>
    </div>
</template>

and my Script

<script>
$(document).ready(function(){
    $('[name="tippy"]').each(function(){
        tippy($(this)[0],{
            allowHTML:true,
            content:document.getElementById('template-test').innerHTML,
            interactive:true,
            placement:'top',
            trigger:'mouseenter'
        });
    });

    $('[name="test-button"]').on('click',function(){
        alert('Works');
    });
});
</script>
Solution

  • Adding onclick attribute to the buttons and trigger a function when the user click the button works for me, here is the code:

    <html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <title>Tippy</title>
  </head>
  <body>
    <div class="form-row">
        <div class="col-6">
            <div>
                <button type="button" name="test-button" class="form-control btn btn-danger">Testing</button>
            </div>
        </div>
        <div class="col-6">
            <div class="form-row">
                <div class="col-2">
                    <button type="button" name="tippy" class="form-control btn btn-danger">A Button 1</button>
                </div>
                <div class="col-2">
                    <button type="button" name="tippy" class="form-control btn btn-warning">A Button 2</button>
                </div>
            </div>
        </div>
    </div>

    <template id="template-test">
        <div class="form-row" style="width:300px;">
            <div class="col">
                <button type="button" name="test-button-1" class="form-control btn btn-danger" onclick="myFunction(this)">Button1</button>
            </div>
            <div class="col">
                <button type="button" name="test-button-2" class="form-control btn btn-warning" onclick="myFunction(this)">Button2</button>
            </div>
            <div class="col">
                <button type="button" name="test-button-3" class="form-control btn btn-success" onclick="myFunction(this)">Button3</button>
            </div>
        </div>
    </template>

    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
    <script>
        function myFunction(param){
            console.log('Click on button = '+ param.name)    
        }
        $(document).ready(function(){
            $('[name="tippy"]').each(function(){
                tippy($(this)[0],{
                    allowHTML:true,
                    content:document.getElementById('template-test').innerHTML,
                    interactive:true,
                    placement:'top',
                    trigger:'mouseenter'
                });
            });
        });
    </script>
  </body>
</html>