Display tooltip when hovering over paypal button?

Question

I have tried using alt and title attributes in the <div> surrounding the code, but it doesn't seem to work.

I'd like to give potential buyers some reassurance about the price without them having to login to paypal or even click the button. Surely there must be a way to get this to work? It has to be an official browser tooltip though, because it has to be trustworthy.

Here is the standard paypal code these days:

    <div id="smart-button-container">
      <div style="text-align: center;">
        <div id="paypal-button-container"></div>
      </div>
    </div>
  <script src="https://www.paypal.com/sdk/js?client-id=clientID&enable-funding=venmo&currency=AUD" data-sdk-integration-source="button-factory"></script>
  <script>
    function initPayPalButton() {
      paypal.Buttons({
        style: {
          shape: 'pill',
          color: 'silver',
          layout: 'horizontal',
          label: 'paypal',
          
        },

        createOrder: function(data, actions) {
          return actions.order.create({
            purchase_units: [{"description":"test","amount":{"currency_code":"AUD","value":100}}]
          });
        },

        onApprove: function(data, actions) {
          return actions.order.capture().then(function(orderData) {
            
            // Full available details
            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

            // Show a success message within this page, e.g.
            const element = document.getElementById('paypal-button-container');
            element.innerHTML = '';
            element.innerHTML = '<h3>Thank you for your payment!</h3>';

            // Or go to another URL:  actions.redirect('thank_you.html');
            
          });
        },

        onError: function(err) {
          console.log(err);
        }
      }).render('#paypal-button-container');
    }
    initPayPalButton();
  </script>

Answer 1

I'd like to give potential buyers some reassurance about the price without them having to login to paypal or even click the button.

The only solution is to display the price/description in a DOM element (separate <div> or similar) next to the paypal button container.

So, something like:

    <div id="smart-button-container">
      <div style="text-align: center;">
        <h2>Test A$100</h2>
        <div id="paypal-button-container"></div>
      </div>
    </div>

Or whatever styling and positioning fits your page.