layui使用tips组件实现鼠标悬浮显示提示信息

鼠标悬停显示提示信息

  1. 代码
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试title>
head>
<script src="https://cdn.staticfile.org/layui/2.7.6/layui.js">script>
<body>
    <span type="text" id="id1" onmouseover="show('测试1','id1')" onmouseleave="close_tips()">测试1span>
    <span type="text" id="id2" onmouseover='show(`
测试2
`
, "id2")
'
onmouseleave="close_tips()">
测试2span> body> <script> function show(msg, id){ layer.tips(''+ msg, '#'+id, {tips: [1,'black']}); } function close_tips(){ layer.closeAll('tips'); } script> html>
  1. 效果图
    layui使用tips组件实现鼠标悬浮显示提示信息_第1张图片
    layui使用tips组件实现鼠标悬浮显示提示信息_第2张图片

你可能感兴趣的:(前端,layui,前端,javascript)