کد نمایش اطلاعات قسمتی از متن

کد نمایش اطلاعات قسمتی از متن با عرض سلام خدمت کاربران کدبازان -کد فوق یکی از کدهای بسیار کاربردی در تمام زمینه ها میباشد که کارکرد کد به این صورته که بعد از رفتن ماوس روی قسمت مشخص شده متن اطلاعات ان به شکل بسیار یبا نمایش داده خواهد شد.

در واقع همان تولتیپ یا tooltip میباشد با استایل متفاوت و زیبا

کد نمایش اطلاعات قسمتی از متن

 

دمو کد

<!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;">

<p>برای تست کد ماوس را روی متن زیر  ببرید</p>

<div class="tooltip">codebazan.ir
  <span class="tooltiptext">اطلاعات متن</span>
</div>

<p>کد بازان کدستان</p>

<div style='display:none'><h1><a title="codebazan" href="https://codebazan.ir">codebazan</a></h1></div>

</body>
</html>

 

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code