Question

当鼠标悬停在标签上时，我有一个带有工具提示的表单。我希望相同的工具提示（相同的位置，相同的文字）也出现在相关输入字段的焦点上。

<div>
    <div title='hello world'>hello world</div>
    <div> <input name="test" /></div>
</div>

我不想在title="..."中添加<input>，因为在我的实际案例中，工具提示更大，会让UI看起来很乱，所以我想触发<div>hello world</div>

焦点上<div><input></div>的工具提示

我在这里创建了一个虚拟示例： http://jsfiddle.net/03nm70x4/

Answer 1

Updated Fiddle

$(document).ready(function() {
    $(document).tooltip({
        items: "input",
        content : $('div[title="this is the title of hello world"]').prop('title'),
    });
});

请告诉我它是否有效......

Answer 2

将标题添加到父div

<div title='this is the title of hello world'>
<label for="test" >hello world</label>
    <input id="test"  />
</div>

Answer 3

我希望您不介意使用库来实现这一目标。您可以使用jQueryUI的工具提示功能而不是独立/独立库。

jQueryUI Tooltip

<div>
    <div id="label" title='hello world'>hello world</div>
    <div> <input id="test-input" name="test" /></div>
</div>

$(function() {
    $( document ).tooltip();
});

$('#test-input').hover(function(){
    $( "#label" ).tooltip( "open" );
});

JqueryUI工具提示：当关注另一个div

3 个答案: