How to ensure that title shows username on hovering an image?

rolandx2022 0
Viewed 68

How do I make it so an title attribute displays the username (different tag), while hovering over a picture?

<div class="profile">
    <img class="image" src="images/7.png" title="here - that it will show the tag value">
    <div class="names-row">
        <p class="name">User</p>
        <p class="tag">@username</p>
javascript css html
3 Answers

You can easily show username on hovering an image by title attribute. we can call it tooltip also. In your example there is no data for the profile. So at first I take a data object for profile. Then just put the username to the title attribute.

Example:

const profileInfo = {
  username: "Tanjim Hasan",
  tag:      "profile",
  src:      "images/7.png"
}

<div class="profile">
    <img class="image" src={profileInfo.src} title={profileInfo.username}>
    <div class="names-row">
        <p class="name">{profileInfo.username}</p>
        <p class="tag">{profileInfo.tag}</p>    
    </div>
</div>

Hopefully It will help you. :)

Tanjim Hasan0

In general, if you have access to the server-side which generates it, then the solution is to add the title attribute to your img as well. Yet, since you have not specified any server-side technologies in your question tags, I will assume in this answer that you cannot take that option and you need to use Javascript for this purpose. Here's an example:

for (let profile of document.getElementsByClassName("profile")) {
    profile.querySelector("img.image").title = profile.querySelector(".tag").innerText;
}
<div class="profile">
    <img class="image" src="https://th.bing.com/th/id/OIP.of-rlOxjEVIV6srGE0dLTQHaEo?pid=ImgDet&rs=1" title="here - that it will show the tag value">
    <div class="names-row">
        <p class="name">User</p>
        <p class="tag">@username</p>
    </div>
</div>
<div class="profile">
    <img class="image" src="https://th.bing.com/th/id/OIP.aetZEH1Rp6Pknak9-7BCXwHaFj?pid=ImgDet&rs=1" title="here - that it will show the tag value">
    <div class="names-row">
        <p class="name">User2</p>
        <p class="tag">@username2</p>
    </div>
</div>

In the snippet above I added two profiles to illustrate that the code will work even if there are several profiles on the same page.

Lajos Arpad0

Use javascript :)

if you only use css,

  1. mouse effect on parent layer
  2. do something on child layer

like below css

.names-row:hover p {
    opacity: 1;
}


const imagebtn = document.querySelector('.image')

imagebtn.addEventListener('pointerover', () => {
    document.querySelector('.name').style.opacity = 1
    document.querySelector('.tag').style.opacity = 1
})
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.tag {
    opacity: 0;
}

.name {
    opacity: 0;
}
    <div class="profile">
        <img class="image" src="https://picsum.photos/id/237/200/300" title="here - that it will show the tag value">
        <div class="names-row">
            <p class="name">User</p>
            <p class="tag">@username</p>
        </div>
    </div>

TomFan0
Related