如何使用其中的HTML表單製作豐富的工具提示

我有一段帶有鏈接的文本。我想製作一個頂部帶有標題的豐富工具提示，並在懸停鏈接時出現收集電子郵件地址的字段。我應該採取什麼方法？如何使用其中的HTML表單製作豐富的工具提示

我已經看過工具提示庫，但似乎沒有任何形式的支持。請在下面找到

內容，鏈接存在的代碼：

<p>Pellentesque habitant <a href="#">Link to show tooltip</a> morbi senectus 
tristique senectus et netus et malesuada pellentesque habitant senectus 
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies 
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. 
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

工具提示內容：

現在我想達到的效果是，當我將鼠標懸停在鏈接工具提示內容應顯示在樣式div中的內容。我應該怎麼做？

來源

2016-09-07 Sathish Manohar

聽起來很糟糕的可訪問性，有些人不能使用鼠標非常好，他們需要按住鼠標在直接移動到工具提示的同時懸停在要素上。另外，它會在觸摸設備上工作嗎？ – jedifans

檢查這個片段

更新

$("a").bind("mousemove", function(event) { 
 
    $("div.tooltip").css({ 
 
     top: event.pageY + 10 + "px", 
 
     left: event.pageX + 10 + "px" 
 
    }).show(); 
 
}) 
 
$('.close').bind('click', function(){ 
 
    $("div.tooltip").fadeOut(); 
 
});

body{ 
 
    font-family:arial; 
 
    font-size:12px; 
 
} 
 
.tooltip { 
 
    width:350px; 
 
    position:absolute; 
 
    display:none; 
 
    z-index:1000; 
 
    background-color:#CB5757; 
 
    color:white; 
 
    border: 1px solid #AB4141; 
 
    padding:15px 20px; 
 
    box-shadow: 0px 3px 2px #8D8D8D; 
 
    border-radius: 6px; 
 
} 
 
.close{ 
 
    right: 15px; 
 
    position: absolute; 
 
    background: #fff; 
 
    color: #555; 
 
    width: 20px; 
 
    height: 20px; 
 
    text-align: center; 
 
    line-height: 20px; 
 
    border-radius: 50%; 
 
    font-size: 10px; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
<p>Pellentesque habitant <a href="#">Link to show tooltip</a> morbi senectus 
 
    tristique senectus et netus et malesuada pellentesque habitant senectus 
 
    fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies 
 
    eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. 
 
    Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
 
</p> 
 
<div class="tooltip"> 
 
    <span class="close">X</span> 
 
    <h3>Tooltip title</h3> 
 
    <p>Vestibulum tortor quam, feugiat vitae, ultricies 
 
     eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. 
 
     Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
 
    </p> 
 
    <form> 
 
     <input type="email" placeholder="[email protected]" /> 
 
     <input type="submit" value="subscribe" /> 
 
    </form> 
 
    <span class="branding">This is our branding message</span> 
 
</div>

來源

2016-09-07 06:27:28

如何將鼠標移動到工具提示中輸入數據？ – Zze

你是對的。我已經更新了答案 –

@HiteshMisro謝謝了。正是我需要的。 –

-1

你可以嘗試與鏈接懸停波浪選擇器顯示YOUT提示元素：

.tooltip { 
    display: none; 
} 

a:hover ~ .tooltip{ 
    display: block; 
}

，然後將你的提示鏈接元素之後。

<p> 
    blabla 
    <a href="#">hover me</a> 
    <span class="tooltip">tooltip content</span> 
    blabla 
</p>

這裏一個pen它的工作原理

來源

2016-09-07 06:20:48 p1n5u

在發佈之前您是否自己測試過？ – Shaggy

對不起，我的手機。將更新:) – p1n5u

關注ŧ這些步驟：

將鏈接和工具提示div添加到新div中。
將tooltip div屬性設置爲可見性：hidden;
並懸停設置此工具提示的屬性是可見的。

，如： HTML：

<div class="link"> <a href="#">Link to show tooltip</a> 
<div class="tooltip"> ......</div> 
</div>

CSS：

.link { 
position: relative; 
display: inline-block; 
border-bottom: 1px dotted black; 
} 

.link .tooltip { 
visibility: hidden; 
width: 120px; 
background-color: black; 
color: #fff; 
text-align: center; 
border-radius: 6px; 
padding: 5px 0; 

position: absolute; 
z-index: 1; 
} 

.link:hover .tooltip { 
visibility: invisible; 
}

來源

2016-09-07 06:31:21 SBhalla

如何使用其中的HTML表單製作豐富的工具提示

回答

相關問題