how apply css to an html attribute

Question

I have a table in html that when hovering over it shows a text.The displayed text has no design, how can I apply some 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>

Image: http://prntscr.com/vz8dyg

I would like to make the letters bigger, in bold etc.

Thanks!!!

Does this answer your question? [How to change the style of the title attribute inside an anchor tag?](https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag). That one is about an anchor tag but it should work the same for a td. — takendarkk, Dec 09 '20 at 19:18

score 0 · Accepted Answer · answered Dec 09 '20 at 20:28

Hi Andoni,

Unfortunately the attribute that triggers the Tool Tip Text on the browser it is hard to customize(title attribute), I can even dare to believe that is not possible to style it, since the way it gets displayed varies from browser to browser, hence, it makes it difficult to display nice looking styling to it, However, you could get use of the pseudo codes such as data-* to create your own style based on that. You will have to feed this pseudo attribute with your php variables or token but here I am posting an example of how to achieve this by using these pseudo custom attributes. I certainly hope this helps with your case, pal!

[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>

how apply css to an html attribute

1 Answers1