สอบถามวิธีทำข้อความขึ้นมาแสดง

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

ภาพประจำตัวสมาชิก
Thanapoom1514
PHP VIP Members
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

สอบถามวิธีทำข้อความขึ้นมาแสดง

โพสต์ที่ยังไม่ได้อ่าน โดย Thanapoom1514 »

สอบถามวิธีทำข้อความขึ้นมาแสดง
คือเวลาเอาเม้าไปชี้ที่รูปอยากให้ข้อความขึ้นแสดงโชว์ต้องทำยังไงบ้างครับ

โค้ด: เลือกทั้งหมด

<style>
    .square {
        width: 55px; 
        height: 50px; 
        border: solid 2px #726E6D;
        transition: 0.5s;
        display: flex;
    }
    .hide {
        display: none;
    }
    .circle {
       
        width: 100%;
        height: 80%;
        background-color: aquamarine;
        border: solid 5px darkcyan;
        border-radius: 100%;
        transition: 0.5s;
        margin-bottom: 3px;
     
    }
    .square:hover  {
            width: 75px; 
            height: 75px;
          
        }
    .circle:hover {
            background-color: #34A56F;
            border: solid 5px #306754; 
     }
    </style>
    
            <div class="hide">ข้อที่อยากแสดงโชว์</div>
        <div class="square">        
            <div class="circle"></div>
        </div>
    
:gfb:
flook
PHP VIP Members
PHP VIP Members
โพสต์: 3751
ลงทะเบียนเมื่อ: 06/06/2022 9:43 am

Re: สอบถามวิธีทำข้อความขึ้นมาแสดง

โพสต์ที่ยังไม่ได้อ่าน โดย flook »

css

โค้ด: เลือกทั้งหมด

a.tip {
    border-bottom: 1px dashed;
    text-decoration: none
}
a.tip:hover {
    cursor: help;
    position: relative
}
a.tip span {
    display: none
}
a.tip:hover span {
    border: #c0c0c0 1px dotted;
    padding: 5px 20px 5px 5px;
    display: block;
    z-index: 100;
    background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
    left: 0px;
    margin: 10px;
    width: 250px;
    position: absolute;
    top: 10px;
    text-decoration: none
}
html

โค้ด: เลือกทั้งหมด

<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>
ที่มา https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag

หรือแบบ ใช้ title

โค้ด: เลือกทั้งหมด

<input type="text" title="ข้อความที่จะแสดง." placeholder="Enter text...">
<div title="ข้อความที่จะแสดง ">ทดสอบ</div>
  <img title="ข้อความที่จะแสดง " />
ประมาณนี้ไหมครับ
ภาพประจำตัวสมาชิก
Thanapoom1514
PHP VIP Members
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

Re: สอบถามวิธีทำข้อความขึ้นมาแสดง

โพสต์ที่ยังไม่ได้อ่าน โดย Thanapoom1514 »

ได้แล้วครับ
:gfb:
ภาพประจำตัวสมาชิก
Thanapoom1514
PHP VIP Members
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

Re: สอบถามวิธีทำข้อความขึ้นมาแสดง

โพสต์ที่ยังไม่ได้อ่าน โดย Thanapoom1514 »

ลองทำตาม ทำได้แล้วครับ

โค้ด: เลือกทั้งหมด

<style>
    .page{
        margin:50vh;

    }
    .circle {
        width: 45px;
        height: 45px;
        background-color: aquamarine;
        border: solid 5px darkcyan;
        border-radius: 100%;
        transition: 0.5s;
        margin-bottom: 3px;
       
    }
    #square {
        width: 55px; 
        height: 55px; 
        border: solid 2px #726E6D;
        transition: 0.5s;
    }
    
    #square:hover  {
         width: 75px; 
         height: 75px;
         cursor: help;
         position: relative
    }
    .circle:hover {
        width: 65px; 
        height: 65px;
    }
        .circle:hover .distance{
            background-color: #fff;
            border: solid 5px #82ffd3; 
            cursor: help;
            position: relative;
            border: #c0c0c0 1px dotted;
            padding: 5px 20px 5px 5px;
            display: block;
            z-index: 100;
            
            left: 10px;
            margin: 10px;
            width: 250px;
            position: absolute;
            top: -40px;
            text-decoration: none;
        }
   
    .distance {
        display: none;
        font-size:14px;
    }
    
    </style>
    <div class="page">
            <div id="square">        
                <div class="circle"><span class="distance">ข้อความแสดงโชว์</span></div>
            </div>
    </div>
ผลลัพธ์ที่ได้
ทำรูปวงกลมกับสี่เหลี่ยม.png
ทำรูปวงกลมกับสี่เหลี่ยม.png (2.63 KiB) Viewed 732 times
เมื่อเอาเม้าไปชี้จะแสดงข้อความขึ้นมา.png
เมื่อเอาเม้าไปชี้จะแสดงข้อความขึ้นมา.png (6.66 KiB) Viewed 732 times
:gfb:
ตอบกลับโพส

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 32