悬停后保持 material design lite 工具提示可见
Keep material design lite tooltip visible after hover
是否可以在 material design lite 工具提示上悬停后保持打开状态?因此,例如用户可以单击其中的 link。
<div id="myTooltip" class="icon material-icons">info</div>
<div class="mdl-tooltip mdl-tooltip--large" for="myTooltip">
<a href="#">Here</a> is the further information.
</div>
您可以在 mouseleave
上阻止工具提示被隐藏,然后根据您想要的任何其他操作处理隐藏工具提示。
例如:
const tt1 = document.querySelector('#tt1');
tt1.addEventListener('mouseleave', (event) => {
event.stopImmediatePropagation();
// handle tooltip hide
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Design Lite Tooltip</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
</head>
<body>
<!-- Large Tooltip -->
<div id="tt1" class="icon material-icons">info</div>
<div class="mdl-tooltip mdl-tooltip--large" for="tt1">
<a href="#">Link</a><span> followed by text</span>
</div>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>
是否可以在 material design lite 工具提示上悬停后保持打开状态?因此,例如用户可以单击其中的 link。
<div id="myTooltip" class="icon material-icons">info</div>
<div class="mdl-tooltip mdl-tooltip--large" for="myTooltip">
<a href="#">Here</a> is the further information.
</div>
您可以在 mouseleave
上阻止工具提示被隐藏,然后根据您想要的任何其他操作处理隐藏工具提示。
例如:
const tt1 = document.querySelector('#tt1');
tt1.addEventListener('mouseleave', (event) => {
event.stopImmediatePropagation();
// handle tooltip hide
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Design Lite Tooltip</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
</head>
<body>
<!-- Large Tooltip -->
<div id="tt1" class="icon material-icons">info</div>
<div class="mdl-tooltip mdl-tooltip--large" for="tt1">
<a href="#">Link</a><span> followed by text</span>
</div>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>