如何将css应用于html属性

Question

我在html中有一个表，当鼠标悬停在它上面时，它会显示一个文本。显示的文本没有设计，我如何应用一些css？

<center>
<div id="container">
<table class="map">
<?php  
for ($i=1; $i < 101; $i++) { 
echo "</tr>";
for ($j=1; $j < 100 ; $j++) { 
$prueba = $i .":".$j;
if ($prueba == '50:50') {
echo "<td onmouseover='' style='cursor: pointer; background-color:#FF0000'  title='title css' id=$prueba></td>";
}else{
echo "<td id=$prueba></td>";
}
}
}
?>
</table>
</div>
</center>
<script>
$(document).ready(function(){
$('tr').mouseover(function(){
var valueOfTd = $(this).find('td:first-child').text();
alert(valueOfTd); 
});
});
</script>

图片：http://prntscr.com/vz8dyg

我想把字母放大，用粗体等

谢谢！！！

Answer 1

你好，

不幸的是，触发浏览器上工具提示文本的属性很难自定义(标题属性(，我甚至不敢相信这是不可能的，因为它的显示方式因浏览器而异，因此，很难向它显示好看的样式。然而，您可以使用伪代码(如data-*(来在此基础上创建自己的样式。您必须将php变量或令牌提供给这个伪属性，但我在这里发布了一个如何使用这些伪自定义属性实现这一点的示例。我当然希望这对你的案子有帮助，朋友！

[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.7s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #1C2833;
color: #F4D03F;
font-size: 110%;
position: absolute;
padding: 5px;
bottom: -1.6em;
left: 95%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
border-radius: 10%;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
.custom-td {
cursor: pointer;
background-color:#FF0000;
padding: 7px;
color:#FBFCFC;
width:60%;
text-align:center;
font-family:'verdana'
}

<center>
<div id="container">
<table class="map">
<tr>
<td class="custom-td" data-title="title css">Testing this script on stack<b>overFlow</b>
</td>
</tr>
</table>
</div>
</center>