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

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

در واقع همان تولتیپ یا 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>

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

دیدگاهتان را بنویسید لغو پاسخ