There’s no way we’re going to be able to diagnose that without seeing it happening ourselves, especially since we dont have your CSS documents.
I thought that by writing text decoration none the black square would be removed (see image below).
<button class="shop-cart">
<i class="fa-solid fa-cart-shopping" title="shopping cart"></i>
</button>
header .buttons .shop-cart {
height: 40px;
width: 40px;
background-color: transparent;
font-size: 25px;
color: white;
cursor: pointer;
text-decoration: none;
}
and what CSS are the fa-solid and fa-cart-shopping applying, and what container is wrapped around the button, and, and, and…
Put it on a webpage exposed to the internet and link it, so we can see it happening.
here is my code
Is… the grey thing on the right of your original images the browser’s scrollbar? Is… your browser not fullscreen or something?
yes full screen
I would just like to have the text when I hover over the basket and no longer the black frame and impossible to do
I tried like this and it doesn’t work
header .fa-cart-shopping title {
text-decoration: none;
}
If you are talking about the title attribute in the following html then css has no way of styling it. It’s down to the browser entirely and we have no access to it.
<i class="fa-solid fa-cart-shopping" style=" text-decoration: none;" title="shopping cart">
Isn’t there an attribute that removes this black square?
You can’t change the browser tooltip assuming that’s what you mean. You just remove the title attribute and then you don’t get any tooltip.
However in my browser the tooltip is black text on a white background
Unless of course you have some sort of JS plugin that is removing the titlle attribute and providing a css tooltip version of its own. However that is not evident in the codepen you posted.
Do you have a codepen demo that shows the black background and whit text?
I put it on codepen and for me it has a black background and the text in white and I would like only the text to remain in white
I use Mozila
That codepen shows no tooltip at all and there is no title attribute on the header cart icon that I can see. Can you post a screenshot of that actual codepen with the tooltip showing?
I think you may be looking at a local version which is running some js that is not in the codepen.
There are 3 of us here now who can’t see the tooltip you mention so there is something strange going on.
I tested in Chrome and Mozilla/Firefox and when I manually add the cart title they show as a white background with black text (I’m assuming that perhaps if you had dark mode selected that would be reversed).
As I said above that unless this is a js enhanced tooltip then it is not possible to change the browser’s default tooltip appearance. It’s impossible which is why some people write their own tooltips instead of the default ones but that is quite complicated to get right.
That is not the CodePen from your link in Post #5.
I think you need to click ‘Sauvegarder’ to save the changes you have made.
this is the right link
Ok I can see the tooltip now but its still a white background with black text on all my browsers.
The only thing I can think is that you have dark mode enabled on your browser by default but it doesn’t look like it as the other elements would change also.
I’m a bit mystified but as I mentioned before if this the default title attribute tooltip then you are stuck with it.
Maybe @Archibald or one of the others here can take a look and see if they see any different. 
ok thank you for your help if I cannot remove this black square I will deactivate it
You don’t want to do that because tooltips are used for accessibility purposes. Taking them away could potentially drive business away.
This might be a scenario where you need to ignore the little things for the big picture since it’s not something covered in the css spec. There are ways around it, but I’m not sure it’s worth the effort of working it out just to make the tool tip look pixel perfect.
