position: absolute;
  display: inline-block;
  z-index: 100;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.75);
  background-color: inherit;
  font-size: 80%;
}

.fossil-toast {/* "toast"-style popup message */
  padding: 0.25em 0.5em;
  margin: 0;
  border-radius: 0.25em;
  font-size: 1em;
  opacity: 0.8;
  border-size: 1px;
  border-style: dotted;
  border-color: rgb( 127, 127, 127, 0.5 );
}

(function(F/*fossil object*/){
  /**
     A basic API for creating and managing a copy-to-clipboard button.

     Requires: fossil.bootstrap, fossil.dom
  */
  const D = F.dom;





  /**
     Initializes element e as a copy button using the given options
     object.

     The first argument may be a DOM element or a string (CSS selector
     suitable for use with document.querySelector()).

     function!).

     .cssClass: optional CSS class, or list of classes, to apply to e.

     .style: optional object of properties to copy directly into
     e.style.

     .oncopy: an optional callback function which is added as an event
     listener for the 'text-copied' event (see below). There is
     functionally no difference from setting this option or adding a
     'text-copied' event listener to the element, and this option is
     considered to be a convenience form of that.

     Note that this function's own defaultOptions object holds default
     values for some options. Any changes made to that object affect
     any future calls to this function.

     Be aware that clipboard functionality might or might not be
     available in any given environment. If this button appears to
     have no effect, that may be because it is not enabled/available
     in the current platform.

     The copy button emits custom event 'text-copied' after it has
     successfully copied text to the clipboard. The event's "detail"
     member is an object with a "text" property holding the copied
     text. Other properties may be added in the future. The event is
     not fired if copying to the clipboard fails (e.g. is not
     available in the current environment).

     Returns the copy-initialized element.

     Example:

     const button = fossil.copyButton('#my-copy-button', {
       copyFromId: 'some-other-element-id'
     });
     button.addEventListener('text-copied',function(ev){
       fossil.dom.flashOnce(ev.target);
       console.debug("Copied text:",ev.detail.text);
     });
  */
  F.copyButton = function f(e, opt){
    if('string'===typeof e){
      e = document.querySelector(e);
    }    
    opt = F.mergeLastWins(f.defaultOptions, opt);

      undefined===srcElem.value ? ()=>srcElem.innerText : ()=>srcElem.value
    );
    D.copyStyle(e, opt.style);
    e.addEventListener(
      'click',
      function(){
        const txt = extract.call(opt);

        if(txt && D.copyTextToClipboard(txt)){
          e.dispatchEvent(new CustomEvent('text-copied',{
            detail: {text: txt}
          }));
        }
      },
      false
    );
    if('function' === typeof opt.oncopy){
      e.addEventListener('text-copied', opt.oncopy, false);
    }
    return e;
  };

  F.copyButton.defaultOptions = {
    cssClass: 'copy-button',
    style: {/*properties copied as-is into element.style*/}
  };
  
})(window.fossil);

     in, it must be a function, and it gets callback back at the end
     of the asynchronous flashing processes.

     This will only activate once per element during that timeframe -
     further calls will become no-ops until the blink is
     completed. This routine adds a dataset member to the element for
     the duration of the blink, to allow it to block multiple blinks.

     If passed 2 arguments and the 2nd is a function, it behaves as if
     it were called as (arg1, undefined, arg2).

     Returns e, noting that the flash itself is asynchronous and may
     still be running, or not yet started, when this function returns.
  */
  dom.flashOnce = function f(e,howLongMs,afterFlashCallback){
    if(e.dataset.isBlinking){
      return;
    }
    if(2===arguments.length && 'function' ===typeof howLongMs){
      afterFlashCallback = howLongMs;
      howLongMs = f.defaultTimeMs;
    }
    if(!howLongMs || 'number'!==typeof howLongMs){
      howLongMs = f.defaultTimeMs;
    }
    e.dataset.isBlinking = true;
    const transition = e.style.transition;
    e.style.transition = "opacity "+howLongMs+"ms ease-in-out";

    init: function(){
      const e = this.e;
      const btnCopy = D.span(),
            link = D.span();
      this.state = {link};
      F.copyButton(btnCopy,{
        copyFromElement: link,
        extractText: ()=>link.dataset.url,
        oncopy: (ev)=>{
          F.toast("Copied: ",D.append(D.code(),ev.detail.text));
          D.flashOnce(ev.target, undefined, ()=>lineTip.hide());
        }
      });//.addEventListener('text-copied', (ev)=>D.flashOnce(ev.target));
      D.append(this.e, btnCopy, link)
    }
  });

  tbl.addEventListener('click', function f(ev){
    lineTip.show(false);
  }, false);

     Creates a new tooltip-like widget using the given options object.

     Options:

     .refresh: callback which is called just before the tooltip is
     revealed or moved. It must refresh the contents of the tooltip,
     if needed, by applying the content to/within this.e, which is the
     base DOM element for the tooltip (and is a child of
     document.body). If the contents are static and set up via the
     .init option then this callback is not needed.

     .adjustX: an optional callback which is called when the tooltip
     is to be displayed at a given position and passed the X
     viewport-relative coordinate. This routine must either return its
     argument as-is or return an adjusted value. The intent is to
     allow a given tooltip may be positioned more appropriately for a
     given context, if needed (noting that the desired position can,

       Returns this object.

       Sidebar: showing/hiding the widget is, as is conventional for
       this framework, done by removing/adding the 'hidden' CSS class
       to it, so that class must be defined appropriately.
    */
    show: function(){
      var x = undefined, y = undefined, showIt;
      if(2===arguments.length){
        x = arguments[0];
        y = arguments[1];
        showIt = true;
      }else if(1===arguments.length){
        if(arguments[0] instanceof HTMLElement){
          const p = arguments[0];

      if(showIt){
        this.refresh();
        x = this.options.adjustX.call(this,x);
        y = this.options.adjustY.call(this,y);
        x += window.pageXOffset;
        y += window.pageYOffset;
      }
      console.debug("showIt?",showIt,x,y);
      if(showIt){
        if('number'===typeof x && 'number'===typeof y){
          this.e.style.left = x+"px";
          this.e.style.top = y+"px";
        }
        D.removeClass(this.e, 'hidden');
      }else{
        D.addClass(this.e, 'hidden');
        delete this.e.style.removeProperty('left');
        delete this.e.style.removeProperty('top');
      }
      return this;
    },

    hide: function(){return this.show(false)}
  }/*F.PopupWidget.prototype*/;

  /**
     Convenience wrapper around a PopupWidget which pops up a shared
     PopupWidget instance to show toast-style messages (commonly seen
     on Android). Its arguments may be anything suitable for passing
     to fossil.dom.append(), and each argument is first append()ed to
     the toast widget, then the widget is shown for
     F.toast.config.displayTimeMs milliseconds. This is called while
     a toast is currently being displayed, the first will be overwritten
     and the time until the message is hidden will be reset.

     The toast is always shown at the viewport-relative coordinates
     defined by the F.toast.config.position.

     The toaster's DOM element has the CSS classes fossil-tooltip
     and fossil-toast, so can be style via those.
  */
  F.toast = function f(/*...*/){
    if(!f.toast){
      f.toast = function ff(argsObject){
        if(!ff.toaster) ff.toaster = new F.PopupWidget({
          cssClass: ['fossil-tooltip', 'fossil-toast']
        });
        if(f._timer) clearTimeout(f._timer);
        D.clearElement(ff.toaster.e);
        var i = 0;
        for( ; i < argsObject.length; ++i ){
          D.append(ff.toaster.e, argsObject[i]);
        };
        ff.toaster.show(f.config.position.x, f.config.position.y);
        f._timer = setTimeout(()=>ff.toaster.hide(), f.config.displayTimeMs);
      };
    }
    f.toast(arguments);
  };
  F.toast.config = {
    position: { x: 5, y: 5 /*viewport-relative, pixels*/ },
    displayTimeMs: 2500
  };

})(window.fossil);