Home About Contact

Projects

Create Messenger Pop Up ChatBox Type Writer ChatGpt Basic Copy Text Using Tolltip Digital Clock CountDown Timer Create StopWatch FB login from Tab Button Accordion Auto Image Gallery DropDown Menu Modal Box Modal Image Box Scroll Indicator To Do List Autocomplete Remember Search History Toggle Switch Calender Layout Dynamic Calender Alarm Set Password Validation Password Generator Age Calculator Multi Step Form Weather API

©️ Copying a Text & Using Tooltip🔥

Note: If you are a beginner, this is something you need to know. Scroll the below section or Click here
  • Postion property & transform property in CSS
  • you have to know animation property in CSS
  • HTML Input field
  • Clipboard API() mehtod in JS
  • select() method in JS
  • You need information about JS function and HTML buttons
  • setTimeOut() method in JS

Write something in the input field and then click the button to copy the text.

Coppied text

After Clicked the button then paste it into NotePad or anywhere else for testing.

HTML


<div class="showcontent">

<h3>Write something in the input field and then click the button to copy the text.</h3>


<div class="tooltiprow">

    <div class="tooltipinput">

        <input type="text" id="text" placeholder="some text...">

    </div>

    <div class="tooltipcontent">

        <button onclick="tooltip()">copy</button>

        <div class="tooltiptext">

            <span>Coppied text</span>

            <div class="arrow">

                
            </div>

        </div>

    </div>

</div>

    

<p>After Clicked the button then  paste it into NotePad or anywhere else for testing.</p>

</div>

JavaScript


function tooltip(){
    let tooltext=document.getElementsByClassName("tooltiptext");
    //console.log(tooltext);//return collection1

    tooltext[0].style.display="inline-block";




    let input=document.getElementById("text");
    console.log(input);

    input.select();

    navigator.clipboard.writeText(input.value);





    setTimeout(function(){
        tooltext[0].style.display='none';
    },1500)
}

CSS


.tooltiprow{
    display: flex;
    align-items: center;
    justify-content: center;
}

.tooltiprow input[type=text]{
    padding: 8px 16px;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 8px;
    font-size: 18px;
}
.tooltipcontent{
    position: relative;
}
.tooltipcontent button{
    padding: 8px 16px;
    background-color:rgb(0, 255, 85);
    color:white;
    border: none;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
}
.tooltipcontent button:hover{
    background-color:rgb(0, 255, 123);
    color:black;
    
}
.tooltiptext{
    position: absolute;
    white-space: nowrap;
    top:-107%;
    padding: 6px;
    left: 50%;
    transform: translate(-50%);
    background-color: black;
    color: white;
    border-radius: 5px;
    
    animation-name: ex;
    animation-timing-function: ease-in-out;
    animation-duration: 1s;
    display: none;
    
}
@keyframes ex {
    from{opacity: 0.4;}
    to{opacity: 1;}
    
}
.arrow{
    display:inline-block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%);
    border-width: 8px;
    border-style: solid;
    border-color:black transparent transparent transparent;
}

@media screen and (max-width:350px) {
    .tooltiprow{
        flex-direction: column;
    }
    .tooltipinput{
        margin-bottom: 15px;
    }
    
}

HTML Input field

  • Input fields in HTML use to gather data from user such as text, numbers, dates and more.
    Example: <input type="text">

navigator.clipboard.writeText(param..)

  • Purpse: Enables copying text to the clipboard programmatically.

select() method

  • Here select method select input element .and the select() method is not available on strings or plain values.
    Example: const inputElement = document.getElementById('copy');
    inputElement.select()

document.execCommand('copy')

  • This method copies the currently selected text or content within the editable element (like input or textarea) to the clipboard.

window.getSelection().removeAllRanges

  • Clear all current selection whithin the document, ensuring no text or content remains selected after this operation.