While working on a recent project, I noticed that some of the images on my page responded differently. Some images, when hovered over, would produce a floating text box next to the cursor, while others would not. Being rather new to programming, I was also confused as to how the text was appearing in the first place. We hadn’t added that in yet, had we?
After looking at the Javascript code, it became apparent that Chrome was reading the value of ‘img.title’ that I gave when rendering, and displayed that information whenever the mouse hovered over the image. Initially, my code to render the image looked like this:
I searched through my project code but there were no event-listeners for ‘onmouseover’ in my .js files. The other rendered images that did not have a text display also did not have a ‘ .title’ value declared. Once I dug a little more, I found that Google calls these ‘tab hover cards’, and they are the default setting for the Chrome browser. You are able to toggle them at ‘chrome://flags/’. Understanding the how and why of these ‘cards’ appearing in the first place got me thinking.
I decided to see if I could expand upon this functionality for use in my project at the time. The page our team created pulls random images from different APIs, and displays them whenever the page is loaded. However, I wanted to include more information than just the artist’s name(artistDisplayName).
What if I load all of the information I want to display into the ‘img.title’ value? Here is a look at how that code started:
This worked! I was able to display all the image info content that I wanted. I just had to ensure I referenced each image’s values correctly. By concatenating the value of ‘img.title’ as a string with these values it was easy to list them in order. However, the way in which they were displayed left much to be desired. You are also left with little to no options on formatting the text-box as the ‘onmouseover’ script is running automatically through Chrome. You are left with a few ways to change the appearance of the content displayed, however.
Since this information works being displayed as a string, I decided to incorporate headers for each of my values. That step was pretty easy and looked like this code below:
This formatting worked better. It also became apparent that the text-box displaying the content has width parameters that will change depending on the amount of information that is passed onto them. Some of the images from other APIs would return over 100 word descriptions as a displayed value. One of the nice things that Chrome does with the text-box is that it will decide its own max-width and then automatically wrap the text. So there is no need to create breaks in the content unless that is preferred.
In my case, I did want to create some breaks to start each content value on a separate line. This was accomplished by adding ‘\n’ between each value. In Javascript, ‘\n’ stands for newline characters and will work in a string. This is what the finished code for displaying the image content looked like:
Please note that it’s written ‘\n’ and not ‘/n’. In other words, don’t be like me, and completely take yourself off course over an improper slash.
If you would like some more info on this topic, you can check out this link:
https://support.google.com/chrome/thread/214352441?hl=en&sjid=10184452963716446879-NA
It gives some facts on this Google Chrome feature. So if you are looking to display some more information about your images, or are looking to make it disappear, know that you simply need to manipulate the ‘ .title’ value on that image.
This functionality may not work in all browsers, or may require saving the value / values under a different attribute. Please consider this if your desire is to have your site user experience consistent. While this method worked well for my project, as my purpose was to simply display images and image info from a server response, it may not work as well for everyone. If your goal is to optimize your SEO, and you would like your images to show up as relevant search results, tweaking the value of the ‘ .title’ attribute can have a positive or a negative effect.
I hope this article is helpful to someone out there just starting out in html and css.
Top comments (0)