JSFiddle - React, Tailwind, and code Playground

by mubarakpasha

HTML

<div class="a">
    <p  tooltip="Your present circumstances don't determine where you can go;">
        Your present circumstances don't determine where you can go; they merely determine where you start.—Nido Qubein
    </p>
</div>

<div class="a">
    <p tooltip="Your present circumstances don't determine where you can go;" >
        Your present circumstances don't determine where you can go; they merely determine where you start.—Nido Qubein
    </p>
</div>

<div tooltip="bla bla zzzzzzzzzzzzzzzzzzz">
    something here
</div>

CSS

.a{
    width:200px;
    height:50px
       margin-bottom::10px;
       text-overflow: ellipsis;
     
    overflow:hidden;
    background-color:yellow;
    
}


.a:hover{
   background-color:green;
    
}

.a p {
   padding:5px; 
    margin-left:5px;
     margin-right:5px;
    white-space: nowrap;
    content : attr(tooltip);
    
}




blockquote::before {
    content: "\201C";
    /* style the quote */
    color: deepPink;
    
    
    
}


blockquote::after {
  
      
}






[tooltip]:before {            
    position : absolute;
     content : attr(tooltip);
     opacity : 0;
    background-color:blue;
      margin-left:200px;
}

[tooltip]:hover:before {        
    opacity : 1;
}