Help with chessboard ui in html css and js

Question: Ok so i made a chessboard UI in html and CSS but i want to be able to hover over a piece or click it and a pop up says what the piece is, next legal moves, strategies, etc… so i’m not wanting the pieces to move just when clicked or hovered over explains the specific piece.

Repl link: https://replit.com/@IncognitoX4/chess#script.js

Hi @IncognitoX4 !
Maybe the title attribute is what you are looking for?
Let’s say your pieces are a <img>.
You can make it such that when you hover over the image, it brings up the text:

<img src="bishop.jpg" title="A bishop for chess. Moves diagonally only">

Taken from:
HTML img title with Quick Examples.


Hope this helps!

2 Likes