首页 > 试题广场 >

鼠标悬停在某个元素上时，在这个位置出现一个tooltip文字

[问答题]
鼠标悬停在某个元素上时，在这个位置出现一个tooltip文字提示。请给出主要实现代码或伟大吗，包括DOM结构，CSS，JS等。
添加回答
Rosevil头像 Rosevil 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> tooltip</title>
	<style type="text/css">
		#box{
			margin-left: 300px;
			width: 500px;
			height:500px;
			background-color:lightblue;
			} 
		#tooltip{
			z-index: 1000;
			position: relative;
			top:0;
			left:0;
			display:none;
			width: 200px;
			height: 35px;
			line-height: 35px;
			background-color:#eee;
		}
	</style>
</head>

<body>
<div id="box">
	<p>鼠标快过来呀</p>
	<div id="tooltip">~\(≧▽≦)/~啦啦啦</div>
</div>
</body>

<script type="text/javascript">
var box = document.getElementById('box')
var tooltip = document.getElementById('tooltip')

box.onmousemove = function(e){
	e = e ? e : window.event
	var x = e.clientX - box.offsetLeft
	var y = e.clientY - box.clientTop

	tooltip.style.display = "block"
	tooltip.style.left = x + "px"
	tooltip.style.top = y + "px"
}
box.onmouseout = function () {
	tooltip.style.display = "none"
}
</script>
</html>
编辑于 2017-08-21 17:51:28 回复(2)
番茄炒西红柿、头像 番茄炒西红柿、 
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .tooltip {
      visibility: hidden;
      transition: all 0.5s;
    }
  </style>

</head>

<body>
  <p class="tooltip">请输入日期信息</p>
  <input class="date-input" type="date"></input>

  <script>
    (function showTooltip(event) {
      var dateInput = document.getElementsByClassName('date-input')[0];
      var tooltip = document.getElementsByClassName('tooltip')[0];
      dateInput.addEventListener('mouseover', function() {
        tooltip.style.visibility = "visible";
      })
      dateInput.addEventListener('mouseout', function() {
        tooltip.style.visibility = "hidden";
      })
    })()
  </script>
</body>
</html>
发表于 2018-10-07 10:13:29 回复(0)
小七201809242255482头像 小七201809242255482
直接设置 title属性
发表于 2019-03-04 10:37:09 回复(0)
小曦w2013头像 小曦w2013
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<form>
    <input type="button" name="Test" value="tooltip" onMouseOver=alert("tooltip")>
    </form>
</body>
</html>

发表于 2017-10-15 17:51:53 回复(0)
just_there_头像 just_there_ 
<span>hover</span>
<script>
var oSpan = document.getElemengtsByTagName('span')[0];
oSpan.onhover = function(){
this.innerHTML= 'tooltip'

}
</script>

发表于 2017-02-15 15:27:55 回复(3)
牛客958379号头像 牛客958379号
获取悬停元素的位置，然后js创建提示窗，然后append到文档中去？
发表于 2016-12-26 01:28:42 回复(0)
提交观点

问题信息

2017 前端工程师 Javascript 挖财 HTML
来自：挖财2017校招前端工...
上传者：牛100
难度：
6条回答 9073浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号