Html “最佳展示方式”；小弹出窗口“；关于输入型文本

当我把鼠标放在输入型文本上时，我需要在小弹出窗口中显示一些信息

目前我使用的标题应答器如下：

要显示的文本
div{
显示：内联块；
可见性：隐藏；
位置：绝对位置；
背景色：#E5F0；颜色：黑色；
}
输入[type=“text”]：悬停~div{visibility:visible}

它可以在chrome上正常工作，但在IE上不行。如果我完全填充输入，弹出窗口不会出现或出现，几秒钟后隐藏

做这个最好的方法是什么完成

新问题：如何在鼠标位置旁边显示弹出窗口（我不需要在鼠标移动的同时移动弹出窗口，只需在第一个位置显示一次即可）

实际代码：

与此类似，但带有弹出窗口：

---

谢谢

您可以使用div元素代替title。 像这样：

div{
显示：内联块；
可见性：隐藏；
}
输入[type=“text”]：focus~div{visibility:visible}

balblabla

有几种方法可以解决这个问题。 以下解决方案使用了

jquery

：

$（文档）.ready（函数（）{
$（“#示例”）.focusout（函数（）{
$（“#tip”）.addClass（“隐藏”）；
})
.focusin（函数（）{
$（“#tip”）.removeClass（“隐藏”）；
});
});
。隐藏{
可见性：隐藏；
}
#小费{
背景颜色：黄色；
填充：2px；
文本对齐：居中；
边界半径：5px；
边框：1px纯色灰色；
显示：内联；
}

一些有用的信息
试试这个：


/*工具提示*/
.刀尖{
颜色：#fff；
背景色：rgba（0,0,0,7）；
文本阴影：无；
字体大小：.8em；
可见性：隐藏；
-webkit边界半径：7px；
-moz边界半径：7px；
-o-边界半径：7px；
边界半径：7px；
文本对齐：居中；
不透明度：0；
z指数：999；
填充：3px8px；
位置：绝对位置；
游标：默认值；
-webkit转换：所有240毫秒的易入易出；
-moz转换：所有240毫秒的缓进缓出；
-ms转换：所有240ms的输入/输出；
-o-过渡：所有240毫秒的缓进-缓出；
过渡：所有240毫秒的缓进缓出；
}
.工具提示，
.tool-tip.top{
顶部：自动；
底部：114%；
左：50%；
}
.工具提示。顶部：之后，
.工具提示：在{
位置：绝对位置；
底部：-12px；
左：50%；
左边距：-7px；
内容：''；
高度：0px；
宽度：0px；
边框：6px实心透明；
边框顶部颜色：rgba（0,0,0,7）；
}
/*默认高度、宽度和边距（不带脚本）*/
.工具提示，
.tool-tip.top{
宽度：80px；
高度：22px；
左边距：-43px；
}
/*刀尖位置右侧*/
.工具提示。对{
最高：50%；
右：自动；
左：106%；
利润上限：-15px；
右边距：自动；
左边距：自动；
}
.工具提示。右：之后{
左：-5px；
最高：50%；
利润上限：-6px；
底部：自动；
边框顶色：透明；
右边框颜色：rgba（0,0,0,7）；
}
/*刀尖位置左侧*/
.工具提示。左{
最高：50%；
左：自动；
右：105%；
利润上限：-15px；
左边距：自动；
}
.工具提示。左：后{
左：自动；
右：-12px；
最高：50%；
利润上限：-6px；
底部：自动；
边框顶色：透明；
左边框颜色：rgba（0,0,0,7）；
}
/*刀尖位置底部*/
.工具尖.底部{
最高：115%；
底部：自动；
左：50%；
页边距底部：自动；
}
.工具提示。底部：后{
位置：绝对位置；
顶部：-12px；
左：50%；
左边距：-7px；
内容：''；
高度：0px；
宽度：0px；
边框：6px实心透明；
边框顶色：透明；
边框底色：rgba（0,0,0,6）；
}
/*左右聚焦的工具提示*/
.聚焦。工具提示。左侧，
.聚焦。工具提示。对{
利润上限：-19px；
}
/*悬停包含工具提示默认值的元素时*/
*：非（.on focus）：悬停>。工具提示，
.聚焦输入：聚焦+.工具提示{
能见度：可见；
不透明度：1；
-webkit转换：所有240毫秒的易入易出；
-moz转换：所有240毫秒的缓进缓出；
-ms转换：所有240ms的输入/输出；
-o-过渡：所有240毫秒的缓进-缓出；
过渡：所有240毫秒的缓进缓出；
}
/*刀尖滑出*/
*：不是（.on focus）>。tool-tip.slideIn，
.on focus>.tool tip{
显示：块；
}
.on focus>.tool-tip.slideIn{
z指数：-1；
}
.on focus>input:focus+.tool-tip.slideIn{
z指数：1；
}
/*底部滑块*/
*：非（.on focus）>。tool-tip.slideIn.bottom，
.on focus>.tool-tip.slideIn.bottom{
最高：50%；
}
*：非（.on focus）：悬停>.tool-tip.slideIn.bottom，
.on focus>input:focus+.tool-tip.slideIn.bottom{
最高：115%；
}	
.on focus>input:focus+.tool-tip.slideIn.bottom{
最高：100%；
}
/*顶部滑块*/
*：不是（.on focus）>。tool-tip.slideIn，
*：非（.on focus）>。tool-tip.slideIn.top，
.on focus>.tool-tip.slideIn，
.on focus>.tool-tip.slideIn.top{
底部：50%；
}
*：非（.on focus）：悬停>.tool-tip.slideIn，
*：非（.on focus）：悬停>.tool-tip.slideIn.top，
.on focus>input:focus+.tool-tip.slideIn，
.on focus>input:focus+.tool-tip.slideIn.top{
底部：110%；
}	
/*左滑块*/
*：非（.on focus）>。tool-tip.slideIn.left，
.on focus>.tool-tip.slideIn.left{
右：50%；
}
*：非（.on focus）：悬停>.tool-tip.slideIn.left，
.on focus>input:focus+.tool-tip.slideIn.left{
右：105%；
}
/*右滑块*/
*：非（.on focus）>。tool-tip.slideIn.right，
.on focus>.tool-tip.slideIn.right{
左：50%；
}
*：非（.on focus）：悬停>.tool-tip.slideIn.right，
.on focus>input:focus+.tool-tip.slideIn.right{
左：105%；
}

刀尖
刀尖
刀尖
刀尖
在谷歌中搜索
工具提示
和
html/css
。。你会发现很多关于这方面的信息。使用bootrstap popover或tooltipThanks，我有一个问题：）
<input type="text" size="5"><div>The text to show</div>

div{
    display:inline-block;
    visibility:hidden;
    position:absolute;
    background-color:#E5E5F0; color:black;
}
input[type="text"]:hover~ div{visibility:visible}