Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
  <head>
    <title>شرح خاصية tooltip - مدونة هادى ستور</title>
  </head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
​
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
}
​
.tooltip:hover .tooltiptext {
    visibility: visible;
}
  
  
  .tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
} 
  
  
  
  .hady {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
​
.hady .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
}
​
.hady:hover .tooltiptext {
    visibility: visible;
}
  
  
  .tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
} 
</style>
<body style="text-align:center;">
​
<h2>شرح خاصية Tooltip</h2>
<p>مدونة هادى ستور شروحات وملحقات لبلوجر والفوتوشوب</p>
​
<div class="tooltip">مدونة هادى ستور
  <span class="tooltiptext">مخزنك المفضل</span>
</div>
  
<div align:right>
  <div class="hady">مدونة هادى ستور
  <span class="tooltiptext">مخزنك المفضل</span>
</div>
  </div>
</body>
</html>
​
​
  
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers