Change What the Tooltip Says When You Drag a File over a Webpage

How can I change the tooltip text that displays when you drag a file over a drop zone on a webpage? By default, it says "Move," e.g.:

enter image description here

I'm developing a JavaScript web app and would like to change what it says to something more meaningful to my app. Is it possible to do it with CSS or is JavaScript necessary?

1 answer

  • answered 2018-03-13 20:16 Phiter

    The message is handled by the OS, but you can change the effect by setting event.dataTransfer.dropEffect to one of the following options:

    • copy

      A copy of the source item is made at the new location.

    • move

      An item is moved to a new location.

    • link

      A link is established to the source at the new location.

    • none

      The item may not be dropped.

    See this example:

    var dropZone = document.getElementById('drop-zone');
    var select = document.getElementById('effectSelect');
    
    dropZone.addEventListener('dragover', function(event) {
      event.preventDefault();
      event.dataTransfer.dropEffect = select.value;
    });
    
    dropZone.addEventListener('drop', function(event) {
      event.preventDefault();
    });
    #drop-zone {
      width: 250px;
      height: 60px;
      border: 3px dashed #aaaaaa;
      margin-top: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #444;
    }
    Select the effect:
    
    <select id="effectSelect">
        <option value="copy">copy</option>
        <option value="move">move</option>
        <option value="link">link</option>
        <option value="none">none</option>
    </select>
    <div id="drop-zone">Drag anything from your OS here</div>

    You can get more information on dataTransfer here.