Question

我想创建一个工具提示，当用户聚焦输入时会显示该工具提示。然后，工具提示将显示与用户键入的文本相关的项目。但是，当用户单击工具提示中的项目时，将关闭非焦点并隐藏工具提示。这就是我到目前为止所得到的，但这并不是我想要的。我想要一个工具提示，只要输入被聚焦或用户悬停工具提示就会显示。而且我的问题就在那里开始。

首先，这是我的HTML：

<div id="genres"></div>
<input type="text">
<div id="vor">
    <div class="tooltip">
        <div class="item>
            Some Text
        </div>
    </div>
</div>

的jQuery

$("#genre input").focus(function(){
    $("#genre #vor .overlay").show();
});

$("#genre input").focusout(function(){
    $("#genre #vor .overlay").hide();
});

当我在工具提示上使用.hover（）时，只要用户悬停某个项目，它就会消失。如果我在项目上使用.hover（），当鼠标位于项目之间时，它将消失。

像THIS这样的网站展示了我想拥有的一个很好的例子。

Answer 1

好的，我已经更新了这个答案。当您聚焦/单击输入字段时，现在会出现工具提示。您可以单击工具提示中的任何项目，它不会消失。当您从工具提示中移除鼠标时，它将消失。

我认为这就是你想要的。

FIDDLE

<div id="genre">
<div id="genres"></div>
<input type="text"></input>
<div id="vor">
    <div class="overlay">
        <a class="clickItem" href="javascript:void(0)">Item 1</a><br />
        <a class="clickItem" href="javascript:void(0)">Item 2</a><br />
        <a class="clickItem" href="javascript:void(0)">Item 3</a>
    </div>
</div>

$("#genre input").click(function(){
    $("#genre #vor .overlay").show();
});

$(".overlay").mouseover(function() {
    $("#genre #vor .overlay").show();
});

$(".overlay").mouseout(function() {
    $("#genre #vor .overlay").hide();
});

/*$("#genre input").keyup(function (){
    //For Testing
var text = $(this).val();
    $("#genre #vor .overlay").html($('<div id="item">'+text+'</div>').click(function(){
    $("#genres").append("<span>"+text+'</span>');
    }));
});*/

.overlay::before {
border: 6px solid transparent;
border-bottom-color: #FFF;
border-top-width: 0;
content: "";
display: inline-block;
left: 10px;
position: absolute;
top: -5px;
z-index: 101;
}

.overlay::after {
border: 7px solid transparent;
border-bottom-color: #CCC;
border-top-width: 0;
content: "";
display: inline-block;
left: 9px;
position: absolute;
top: -7px;
z-index: 100;
}

.overlay {
border: 1px solid #CCC;
display: none;
float: left;
padding: 5px 10px 5px 10px;
min-width: 25px;
position: absolute;
z-index: 200;
box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
border-radius: 5px;
top:4px;
left: 5px;
}

#vor {
position: relative;
height: 0px;
}

#item {
background-color: #474747;
padding: 2.5px 10px 2.5px 10px;
border-radius: 8px;
margin: 3px 0px 0px 0px;
color:#FFF;
cursor: pointer;
}

鼠标悬停时显示工具提示，由输入触发

1 个答案: