CSS ﺭﺍﺰﺑﺍ ﻪﺘﮑﻧ

فهرست مطالب

    نمایش فهرست مطالب

.ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ ﺭﺍﺰﺑﺍ ﺕﺎﮑﻧ CSS ﺎﺑ

ﺭﺍﺰﺑﺍ ﯼﺎﻤﻨﻫﺍﺭ ﯼﺎﻫ ﻪﻧﻮﻤﻧ :ﯽﺸﯾﺎﻤﻧ ﯼ ﻪﺨﺴﻧ

:ﺩﻮﺷﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﯼﺰﯿﭼ ﺩﺭﻮﻣ ﺭﺩ ﯽﻓﺎﺿﺍ ﺕﺎﻋﻼﻃﺍ ﻥﺩﺮﮐ ﺺﺨﺸﻣ ﯼﺍﺮﺑ ﺭﺍﺰﺑﺍ ﯼﺎﻤﻨﻫﺍﺭ ﮏﯾ

Top Tooltip text
Right Tooltip text
Bottom Tooltip text
Left Tooltip text

ﯽﻠﺻﺍ ﺭﺍﺰﺑﺍ ﯼﺎﻤﻨﻫﺍﺭ

:ﺩﻮﺷ ﺮﻫﺎﻇ ﺪﻫﺩﯽﻣ ﺖﮐﺮﺣ ﺮﺼﻨﻋ ﮏﯾ ﯼﻭﺭ ﺍﺭ ﺱﻭﺎﻣ ﺮﺑﺭﺎﮐ ﯽﺘﻗﻭ ﻪﮐ ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ ﺭﺍﺰﺑﺍ ﯼ

ﻝﺎﺜﻣ

<style>
/* Tooltip container */
.tooltip-local {
  position: relative;
    
display: inline-block;
  border-bottom: 1px dotted 
black; /* If you want dots under the hoverable text */
}
/* Tooltip text 
*/
.tooltip-local .tooltiptext {
  visibility: hidden;
  width: 120px;
    
background-color: black;
  color: #fff;
  text-align: center;
    padding: 5px 0;
  
border-radius: 6px;	  
/* Position the tooltip text - see examples below! */
  position: absolute;
    z-index: 1;
}
/* Show 
the tooltip text when you mouse over the tooltip container */
.tooltip-local:hover 
.tooltiptext {
  visibility: visible;
}
</style>
<div class="tooltip-local">Hover 
over me
  <span class="tooltiptext">Tooltip 
text</span>
</div>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<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;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Basic Tooltip</h2>

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.</p>

</body>
</html>

ﺪﺷ ﻩﺩﺍﺩ ﺢﯿﺿﻮﺗ ﻝﺎﺜﻣ

HTML: ﻑﺮﻇ ﺮﺼﻨﻋ ﮏﯾ ﺯﺍ (ﺪﻨﻧﺎﻣ <div>) ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺍﺭ ﻥﺁ ﻭ ﺪﯿﻨﮐ ﻩﺩ

.ﺩﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ class="tooltiptext" ﺎﺑ (<span>

CSS: ﺱﻼﮐ ﺭﺍﺰﺑﺍ ﻪﺘﮑﻧ ﺯﺍ

ﺖﺳﺍ ﻦﯾﺍ .ﺩﺭﺍﺩ ﯽﻣ ﻪﮕﻧ ﺍﺭ ﯽﻌﻗﺍﻭ ﺭﺍﺰﺑﺍ ﯼﺎﻤﻨﻫﺍﺭ ﻦﺘﻣ tool

.ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺭﺍﺰﺑﺍ ﯼﺎﻤﻨﻫﺍﺭ ﻪﺑ ﺩﺮﮔ ﯼﺎﻫ ﻪﺷﻮﮔ ﻥﺩﻭﺰﻓﺍ ﯼﺍﺮﺑ ﯽﺑﺎﯾ ﺖﯿﻌﻗﻮﻣ ﺭﺍﺰﺑﺍ ﺕﺎﮑﻧ

.ﺖﺳﺍ ﻪﺘﻓﺮﮔ ﺭﺍﺮﻗ "ﺭﻭﺎﻨﺷ ﻞﺑﺎﻗ" (left:105%) ﺖﺳﺍﺭ

ﺖﺳﺍﺭ ﺖﻤﺳ ﺭﺍﺰﺑﺍ ﯼﺎﻤﻨﻫﺍﺭ

.tooltip-local .tooltiptext {
  top: -5px;
  
left: 
105%; 
}

:ﻪﺠﯿﺘﻧ

Hover over me Tooltip text

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<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;
}
</style>
<body style="text-align:center;">

<h2>Right Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

ﭗﭼ ﺖﻤﺳ ﺭﺍﺰﺑﺍ ﯼﺎﻤﻨﻫﺍﺭ

.tooltip-local .tooltiptext {
  top: -5px;
  
right: 
105%; 
}

:ﻪﺠﯿﺘﻧ

Hover over me Tooltip text

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<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;
  right: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Left Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

ﺪﯿﻨﮐ ﻪﻌﺟﺍﺮﻣ ﺎﻫﻝﺎﺜﻣ ﻪﺑ ،ﺩﻮﺷ ﺮﻫﺎﻇ ﻦﯿﯾﺎﭘ ﺎﯾ ﻻﺎﺑ ﺭﺩ ﺭﺍﺰﺑﺍ ﯼﺎﻤﻨﻫﺍﺭ ﺪﯿﻫﺍﻮﺧ

ﻻﺎﺑ ﺭﺍﺰﺑﺍ ﯼﺎﻤﻨﻫﺍﺭ

.tooltip-local .tooltiptext {
  width: 120px;
  
bottom: 100%;
  left: 
50%; 
  margin-left: -60px; /* Use half of the width 
(120/2 = 60), to center the tooltip */
}

:ﻪﺠﯿﺘﻧ

Hover over me Tooltip text

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<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;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

ﻦﯿﯾﺎﭘ ﺭﺍﺰﺑﺍ ﻪﺘﮑﻧ

.tooltip-local .tooltiptext {
  width: 120px;
  top: 100%;
  left: 
50%; 
  margin-left: -60px; /* Use half of the width 
(120/2 = 60), to center the tooltip */
}

:ﻪﺠﯿﺘﻧ

Hover over me Tooltip text

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<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: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Bottom Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

ﺭﺍﺰﺑﺍ ﯼﺎﻤﻨﻫﺍﺭ ﯼﺎﻫ ﺶﻠﻓ

.ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺍﺭ "ﯽﻟﺎﺧ" ،ﺩﻮﺷ ﺮﻫﺎﻇ ﺭﺍﺰﺑﺍ ﯼﺎﻤﻨﻫﺍﺭ ﺯﺍ ﯽﺻﺎﺧ ﺖﻤﺳ ﺯﺍ ﺪﯾﺎﺑ ﻪﮐ ﯽﺸﻠﻓ ﺩﺎﺠﯾ

:ﺩﺮﮐ ﻪﻓﺎﺿﺍ ﺭﺍﺰﺑﺍ ﯼﺎﻤﻨﻫﺍﺭ ﻦﯿﯾﺎﭘ ﻪﺑ ﺍﺭ ﺶﻠﻓ ﮏﯾ ﻥﺍﻮﺗ ﯽﻣ ﻪﻧﻮﮕﭼ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﻝﺎﺜﻣ

ﻦﯿﯾﺎﭘ ﺶﻠﻓ

.tooltip-local .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;
}

:ﻪﺠﯿﺘﻧ

Hover over me Tooltip text

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<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: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Top Tooltip w/ Bottom Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

ﺪﺷ ﻩﺩﺍﺩ ﺢﯿﺿﻮﺗ ﻝﺎﺜﻣ

ﺭﺩ ﺍﺭ ﺶﻠﻓ %100 :ﻻﺎﺑ<"code class="w3-codespan> :ﺪﯿﻫﺩ ﺭﺍﺮﻗ ﺭﺍﺰﺑﺍ ﯼﺎﻤﻨﻫﺍﺭ

ﻪﺟﻮﺗ: ﯽﮔﮋﯾﻭ border-width ﯽﻣ

border-color ﻢﯾﺩﺮﮐ ﻢﯿﻈﻨﺗ ﺍﺭ .ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺶ

.ﺩﺮﮐ ﻪﻓﺎﺿﺍ ﺭﺍﺰﺑﺍ ﯼﺎﻤﻨﻫﺍﺭ ﯼﻻﺎﺑ ﻪﺑ ﺍﺭ ﺶﻠﻓ ﮏﯾ ﻥﺍﻮﺗ ﯽﻣ ﻪﻧﻮﮕﭼ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﻝﺎﺜﻣ ﻦ

ﻻﺎﺑ ﺶﻠﻓ

.tooltip-local .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
  margin-left: -5px;
  
border-width: 5px;
  border-style: solid;
  
border-color: transparent transparent black transparent;
}

:ﻪﺠﯿﺘﻧ

Hover over me Tooltip text

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<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: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Bottom Tooltip w/ Top Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

:ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﺭﺍﺰﺑﺍ ﯼﺎﻤﻨﻫﺍﺭ ﭗﭼ ﺖﻤﺳ ﺭﺩ ﺶﻠﻓ ﮏﯾ ﻥﺩﺮﮐ ﻪﻓﺎﺿﺍ ﻩﻮﺤﻧ ﻝﺎﺜﻣ ﻦﯾﺍ

ﭗﭼ ﺖﻤﺳ ﺶﻠﻓ

.tooltip-local .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
    right: 100%; /* To the left of the tooltip 
*/
  margin-top: -5px;
  
border-width: 5px;
  border-style: solid;
  
border-color: transparent black transparent transparent;
}

:ﻪﺠﯿﺘﻧ

Hover over me Tooltip text

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<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: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Right Tooltip w/ Left Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

:ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﺭﺍﺰﺑﺍ ﯼﺎﻤﻨﻫﺍﺭ ﺖﺳﺍﺭ ﺖﻤﺳ ﺭﺩ ﺶﻠﻓ ﮏﯾ ﻥﺩﺮﮐ ﻪﻓﺎﺿﺍ ﻩﻮﺤﻧ ﻝﺎﺜﻣ ﻦﯾﺍ

ﺖﺳﺍﺭ ﺶﻠﻓ

.tooltip-local .tooltiptext::after {
  content: " ";
  position: absolute;
    top: 50%;
  left: 100%; /* To the right of the 
tooltip */
  margin-top: -5px;
  
border-width: 5px;
  border-style: solid;
  
border-color: transparent transparent transparent black;
}

:ﻪﺠﯿﺘﻧ

Hover over me Tooltip text

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<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: absolute;
  z-index: 1;
  top: -5px;
  right: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Left Tooltip w/ Right Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Fade In Tooltips (ﻦﺸﯿﻤﯿﻧﺍ)

ﺎﻤﺷ ،ﺩﻮﺷ ﻮﺤﻣ ﺪﺷﺎﺑ ﻩﺪﻫﺎﺸﻣ ﻞﺑﺎﻗ ﺖﺳﺍ ﺭﺍﺮﻗ ﻪﮐ ﯽﻧﺎﻣﺯ ﺭﺍﺰﺑﺍ ﯼﺎﻤﻨﻫﺍﺭ ﻦﺘﻣ ﺪﯿﻫﺍﻮﺧﯽ

ﻝﺎﺜﻣ

.tooltip-local .tooltiptext {
  opacity: 0;
  
transition: opacity 1s;
}
.tooltip-local:hover 
.tooltiptext {
  opacity: 1;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<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: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>
<body style="text-align:center;">

<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible.</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

تمامی حقوق محفوظ است. © BasicIT.org • 2023-2024