How do I make onclick tooltip appear at the bottom of the viewport

[kapooramit]

Google docs shows Copied to clipboard message when you click any deep anchor link icon like here:

https://developers.google.com/docs/api/reference/rest/v1/documents#resource:-document

I am trying to implement the same. I am using AnchorJS to create deep anchors, ClipboardJS to copy the anchor, and Tooltipster to show the tooltips. The last part left is showing the "Copied to clipboard" tooltip/message at the bottom of the screen like the Google Docs does as soon as the deep anchor is clicked without changing the original anchor tooltip.

How can I get this done? I am little confused with how custome positioning works...

[Louis Ameline]

Hi, yes, if you force the positioning of the tooltip to fixed in your css (typically applied as theme or as an override to a default theme) and use functionPosition, you'll achieve what you want.

// the target element actually doesn't matter as long as it's in the DOM
$('body').tooltipster({
  arrow: false,
  content: "Copied to Clipboard",
  functionPosition: function(instance, helper, position) {
    // here, you would do some maths based on the screen size to determine
    // an appropriate number of pixels. I hard-code some values here for the
    // example
    position.coord.top = 600;
    position.coord.left = 900;
    return position;
  }
});

[kapooramit]

Thanks! I tried but seems I am doing something wrong. See this:

        // Initialize deep anchor links using AnchorJS. 
        anchors.add();
        // add deep anchor link href value to data-clipboard-text attribute for ClipboardJS
        for (var r=0; r < document.getElementsByClassName("anchorjs-link").length; r++) {
          var danchors = document.getElementsByClassName("anchorjs-link");
          var danchorshref = danchors[r].baseURI + danchors[r].href;
          danchors[r].setAttribute('data-clipboard-text',danchorshref);
          danchors[r].classList.add('danchor');
          var danchortooltip = 'Copy link to this section: ' + danchors[r].parentElement.innerText;
          danchors[r].setAttribute('title', danchortooltip);
          danchors[r].setAttribute('id', 'anchor-200' + r);
        }

        // Initialize Tooltipster to show tooltip for the anchor.   
        $('.danchor').tooltipster({
          theme: ['tooltipster-borderless','tooltipster-borderless-customized'],
          arrow: false
        });
        
        // Initialize ClipboardJS to copy the anchor on clicking it.
        let anchorjsLinks = document.querySelectorAll(".anchorjs-link");
        anchorjsLinks.forEach(el => {
          el.addEventListener("click", event => {
            event.preventDefault();
            new ClipboardJS(".anchorjs-link");
            
           // the target element actually doesn't matter as long as it's in the DOM
            $('body').tooltipster({
              arrow: false,
              content: "Copied to Clipboard",
              functionPosition: function(instance, helper, position) {
                // here, you would do some maths based on the screen size to determine
                // an appropriate number of pixels. I hard-code some values here for the
                // example
                position.coord.top = 600;
                position.coord.left = 900;
                return position;
              }
            });
          });
        });

The HTML:

<button class="anchorjs-link danchor tooltipstered" aria-label="Anchor" data-anchorjs-icon="" style="font: 1em / 1 anchorjs-icons; padding-left: 0.375em;" data-clipboard-text="baseURL#QuickInstall-Linux-SystemRequirements" id="anchor-2002">
</button>

[Louis Ameline]

I can't really spend more time on this unfortunately, please ask for help on Stackoverflow if need be. Btw, you are supposed to change the top and left position in the code I gave you.