我需要几个HTML元素,以便在悬停时显示工具提示。这些不是常规的HTML元素,它们来自后端的生成脚本,我没有更改权限。从前端角度来看,我想知道的是如何显示工具提示而无需在HTML中声明。
我尝试使用Bootstrap工具提示,但是您需要在HTML标记中将其声明为标题,因此它没有用。因此,如下面的示例所示,当您将鼠标悬停在包含“应该”的“动作”元素上时,需要在工具提示中显示一些文字,即“动作”。当您将鼠标悬停在'Quantifier'元素中包含的文本'approximate number of'时,将会应用相同的字词-应该显示单词'Quantifier'。希望这是有道理的。
<body>
One string that <Action>should</Action> work is
<Quantifier>approximate number of</Quantifier> other things.
<script>
$(document).ready(function(){
$("Action").hover(function(){
});
$("Quantifier").hover(function(){
});
});
</script>
<body>
到目前为止,尚无定论,因为我只能更改CSS值,而不能更改工具提示文本。
最佳答案
您可以尝试更新这些元素上的title
属性。需要注意的一件事是,HTML标记在编译时将以小写形式显示。
$(document).ready(function() {
var style = document.createElement('style');
style.type = 'text/css';
$('head')[0].appendChild(style);
style.innerHTML =
`action, quantifier {
position: relative;
display: inline-block;
margin-top: 20px;
}
action[title]:hover:after, quantifier[title]:hover:after {
content: attr(title);
position: absolute;
top: -100%;
left: 0;
}
action[title]:hover:after {
color: red;
border: solid 1px black;
}
quantifier[title]:hover:after {
color: blue;
border: solid 1px black;
}`;
$('action')[0].title = 'Action';
$('quantifier')[0].title = 'Quantifier';
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
One string that <Action>should</Action> work is
<Quantifier>approximate number of</Quantifier> other things.
</body>