Closed kapooramit closed 4 years ago
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;
}
});
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>
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.
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...