Tooltips for Button Elements

Tooltips for Button elements

Simply add a title to your button.

<button title="Hello World!">Sample Button</button>

how to add tooltip for wordpress button?

check this for button and text

.tooltip-text {
color:#000;
text-align: center;
padding: 6px 0;
position: absolute;
z-index: 1;
}
.tooltip-text .tooltiptext,  .kt-btn-wrap  .tooltiptext{visibility:hidden;}
.tooltip-text:hover .tooltiptext, 
.kt-btn-wrap:hover span.tooltiptext{
visibility: visible;background-color: black;color:#fff;width:100%;
}

<div class="tooltip-text">Parent text
 <span class="tooltiptext">Tooltip text here!</span>
</div><br><br>
<div class="kt-btn-wrap kt-btn-wrap-2">
 <a class="kt-button button kt-btn-2-action kt-btn-size-custom kt-btn-style-basic kt- 
 btn-svg-show-always kt-btn-has-text-true kt-btn-has-svg-false" >
 <span class="kt-btn-inner-text">Tooltip Button</span>
</a><span class="tooltiptext">Tooltip text here for button!</span></div>

How does the text of the tooltip change when the button is clicked?

You can change the tooltip while you’re hovering over the button by using Bootstap’s tooltip update() function followed by the show() function. Then you can attach a listener to listen for the mouse to leave. When the mouse leaves, you can switch the tooltip back.

One note: Bootstrap’s documentation for update says the function “Updates the position of an element’s tooltip.” It doesn’t say it will update the text, but it does. According to this Change Twitter Bootstrap Tooltip content on click, there used to be a function fixTitle that would update the text, but that’s no longer available (the function is available through _fixTitle).

Update

For your code version in Pastebin, there’s a complication with using tooltipList[ ] – you would need to use [0] for one button and [1] for the other. Since you’re creating separate ClipboardJS instances, it’s probably easiest to create separate tooltip instances with unique names, rather than having to track which element is [0] and which is [1].

I’ve updated my answer to support two buttons using separate elements and instances for each. In your Pastebin code, you show you’re going to be copying the content from a container (a modal), but the modals are currently not in your example.

I also enclosed everything inside a self-invoking expression to avoid any naming conflicts and encapsulate everything.

Update 2

For changing the tooltip text for modals, the tooltip needs to be specifically hidden when the mouse leaves. I'm not sure why a modal is different from a button, but since the tooltip was shown using a method, it seems to want a method to hide it.

Adding the line: tooltipShare.hide(); and tooltipDonation.hide(); to the callback functions after the mouse leaves will hide the tooltip.

Update 3

To switch from Copier le lien to Copier l'adresse with an apostrophe, change from single quote marks for defining strings to double quote marks.

tooltipShareButton.setAttribute('data-original-title', 'Copier le lien');

tooltipShareButton.setAttribute("data-original-title", "Copier l'adresse");

Because Copier l'adresse is so much longer than Lien copié, it would make sense to make some adjustments to the styling. If you can put the below styles in your head (or add to one of the CSS files) somewhere so they won’t get overwritten, they’ll help the tooltip look better.

<style>
  .tooltip-inner {
     width: 7rem;
  }

  .tooltip.show {
     opacity: 1;
  }
</style>

(function (doc, clip, boot) {
    // btn-clipboard.js
    var clipboardShare = new clip('#btn-clipboard-share');
    var clipboardDonation = new clip('#btn-clipboard-donation');
    var tooltipShareButton = doc.getElementById('btn-clipboard-share');
    var tooltipDonationButton = doc.getElementById('btn-clipboard-donation');
    var tooltipShare = new boot.Tooltip(tooltipShareButton);
    var tooltipDonation = new boot.Tooltip(tooltipDonationButton);

    clipboardShare.on('success', function(e) {
        function restoreTitle(e) {
            tooltipShare.hide();
            tooltipShareButton.setAttribute('data-bs-original-title', 'Copier le lien');
            tooltipShareButton.removeEventListener('mouseleave', restoreTitle);
        }
        tooltipShareButton.setAttribute('data-bs-original-title', 'Lien copié');
        tooltipShare.update();
        tooltipShare.show();
        tooltipShareButton.addEventListener('mouseleave', restoreTitle);
    });

    clipboardShare.on('error', function(e) {
        function restoreTitle(e) {
            tooltipShare.hide();
            tooltipShareButton.setAttribute('data-bs-original-title', 'Copier le lien');
            tooltipShareButton.removeEventListener('mouseleave', restoreTitle);
        }

        tooltipShareButton.setAttribute('data-bs-original-title', 'Erreur');
        tooltipShare.update();
        tooltipShare.show();
        tooltipShareButton.addEventListener('mouseleave', restoreTitle);
    });

    clipboardDonation.on('success', function(e) {
        function restoreTitle(e) {
            tooltipDonation.hide();
            tooltipDonationButton.setAttribute('data-bs-original-title', 'Copier le lien');
            tooltipDonationButton.removeEventListener('mouseleave', restoreTitle);
        }

        tooltipDonationButton.setAttribute('data-bs-original-title', 'Adresse copiée');
        tooltipDonation.update();
        tooltipDonation.show();
        tooltipDonationButton.addEventListener('mouseleave', restoreTitle);
    });

    clipboardDonation.on('error', function(e) {
        function restoreTitle(e) {
            tooltipShare.hide();
            tooltipDonationButton.setAttribute('data-bs-original-title', 'Copier le lien');
            tooltipDonationButton.removeEventListener('mouseleave', restoreTitle);
        }

        tooltipDonationButton.setAttribute('data-bs-original-title', 'Erreur');
        tooltipShare.update();
        tooltipShare.show();
        tooltipDonationButton.addEventListener('mouseleave', restoreTitle);
    });
}(document, ClipboardJS, bootstrap));

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

<style>
    #btn-clipboard-share, #btn-clipboard-donation {
        width: 6rem;
    }
</style>

<button role="button" id="btn-clipboard-share" class="btn btn-outline-dark m-3" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Copier le lien" data-clipboard-text="https://www.example.fr/Share">Share</button>

<button role="button" id="btn-clipboard-donation" class="btn btn-outline-dark m-3" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Copier le lien" data-clipboard-text="https://www.example.fr/Donation">Donation</button>

Tooltip on click of a button

Clipboard.js creator here. So Clipboard.js is not opinionated about user feedback which means it doesn't come with a tooltip solution.

But here's an example of how you can integrate it with Bootstrap's Tooltip.

// Tooltip
$('button').tooltip({  trigger: 'click',  placement: 'bottom'});
function setTooltip(message) {  $('button').tooltip('hide')    .attr('data-original-title', message)    .tooltip('show');}
function hideTooltip() {  setTimeout(function() {    $('button').tooltip('hide');  }, 1000);}
// Clipboard
var clipboard = new Clipboard('button');
clipboard.on('success', function(e) {  setTooltip('Copied!');  hideTooltip();});
clipboard.on('error', function(e) {  setTooltip('Failed!');  hideTooltip();});

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script><link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary" data-clipboard-text="1">Click me</button>

How to enable tooltip on disabled button in javascript?

Use title

function toggle() {
  var button = document.getElementById('button');
  if (button.disabled) {
    button.disabled = false;
    button.setAttribute('title', 'Enabled title');
  } else {
    button.disabled = true;
    button.setAttribute('title', 'Disabled title');
  }
}

<button onclick="toggle()">Toggle enable/disable</button>
<button disabled title="Enabled title" id="button">Hover on me</button>

Tooltip with buttons and image

I would suggest to use Bootstrap popover as it is more flexible. See bootstrap documentation for popover here

Here is a simple example on how to use it

FIDDLE

HTML

<div class="container">
  <h3>Bootstrap 3 Popover HTML Example</h3>
    <span data-placement="bottom" data-toggle="popover" data-container="body" data-placement="left" type="button" data-html="true" href="#" id="login" class="btn btn-default" >Click me</span>
    <div id="popover-content" class="hide">
        <div class="row">
         <div class="col-xs-4">
           <img width="88px" height="88px"src="https://pbs.twimg.com/profile_images/816404989392211968/Wv_8ZDrX_400x400.jpg"/>
         </div>
         <div class="col-xs-8">
           <h4>
           Justin Trudeau <br/>
           <small>
             Prime minister of Canada
           </small>
           </h4>
           <button class="btn btn-sm btn-primary">
           Follow
           </button>
           <button class="btn btn-sm btn-default">
           View profile
           </button>         
         </div>
    </div>
</div>  

JAVASCRIPT

 $("[data-toggle=popover]").popover({
        html: true, 
        content: function() {
              return $('#popover-content').html();
            }
    });

trigger tooltip on button based on search field value

You can initialize your tipso plugin on page load. Then , you can simply use tipso('show') or tipso('hide') depending on the condition to hide/show tooltip .

Demo Code :

$(function() {
  var searchBtn = jQuery('.find__btn');
  searchBtn.tipso({
    titleContent: 'Hello',
  });
  searchBtn.on("mouseover", function() {
    var searchText = $('.find__field').val();
    if (searchText.length === 0) {
      searchBtn.tipso('show'); //show 
    } else {
      searchBtn.tipso('hide'); //hide..
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tipso/1.0.8/tipso.css" integrity="sha512-huSVDpZEo5Zb91YBqN03p+XP7b2S8m9nB/Pn2rbwOe0GF+jvPaFx06mexoH8lAmpa4+OEe1G4Wp3UGYcrY8V1g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tipso/1.0.8/tipso.min.js" integrity="sha512-uffeXd+Tch3d7SWCkqqRg56IiDLYVnsXSJ22uDJ5DP1Nh55XphpL1BHL4c2NbpBrgmPjH4w9C9zgYQzwC8343w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<input type="text" class="find__field">
<button class="find__btn">Find..
</button>

Add a tooltip to a div

For the basic tooltip, you want:

<div title="This is my tooltip">

like:

.visible {
  height: 3em;
  width: 10em;
  background: yellow;
}

<div title="This is my tooltip" class="visible"></div>

---

Related Topics