以下是代码示例:
<p>Bob's <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p>
&#13;
如果用户将鼠标悬停在 canine, equine 或 allopolyploid 上,我该如何制作,我使用的标题然后可以向用户显示dfn标题,以便他知道每个更难的单词意味着什么?
答案 0 :(得分:2)
使用
type AuthEmailId App = UserId
属性代替data-title
并设置样式。
您还可以使用css设置样式。
如果您只使用标题,则无法删除默认标题工具提示。
title
dfn {
border-bottom: 1px dotted black;
position: relative;
}
dfn[data-title]:hover:after {
content: attr(data-title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
z-index: 20;
white-space: nowrap;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eeeeee), color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
答案 1 :(得分:1)
它已经像你想要的那样。
<span title="I am hovering over the text">This is the text I want to have a mousover</span>
鼠标悬停时会显示标题。
否则您可以使用https://jqueryui.com/tooltip/。 包括jQueryUI。
<script type="text/javascript">
$(document).ready(function(){
$(this).tooltip();
});
</script>
或者你可以尝试包括bootstrap http://getbootstrap.com/javascript/#tooltips。
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Hello This Will Have Some Value">Hello...</button>
答案 2 :(得分:1)
只需将标题用作以下内容:在psuedo之后,然后在工具提示中显示此内容!
p {
margin: 60px auto;
}
dfn {
position: relative;
}
dfn:hover:after {
content: attr(title);
background: #fff;
padding: 5px 12px;
border: solid 1px #ddd;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}
&#13;
<p>Bob's <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p>
&#13;
答案 3 :(得分:1)
将title
更改为数据属性,使用伪元素似乎是最合乎逻辑的
div {
width: 50%;
margin: 25px auto;
bordeR: 1px solid grey;
padding: 1em;
}
dfn {
position: relative;
}
dfn:hover:after {
display: block;
}
dfn:after {
display: none;
content: attr(data-title);
position: absolute;
left: 0;
top: 0;
margin-top: -2em;
white-space: nowrap;
background: lightgreen;
padding: .25em;
border: 1px solid green;
}
&#13;
<div>
<p>Bob's <dfn data-title="Dog">canine</dfn> mother and <dfn data-title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn data-title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p>
</div>
&#13;
这也意味着`标题&#39;不会显示以及新的工具提示类型对象。
但请注意,此方法有一些缺点,如长title
有溢出问题所述。