how can i make css for <p title=“titlehere”></p>

Question

I have this code, which displays the button shown below:

<p class="head_ico_p" title="profile"><img class="head_ico" src="images/profile.png"/></p>

I would like to style the title (tooltip) using CSS so that it looks like that in the image below:

Can anyone help me?

Answer 1

Try this:

HTML

<p class="head_ico_p" title="profile">
   <img class="head_ico" src="https://app.getfloop.com/img/dashboard/app/placeholder-app-icon.png"/>
</p>
<p class="caption">Edit Profile</p>

CSS

    .head_ico_p{
        width:100px;
        margin:20px auto 0;
        text-align:center;
    }
    img{
        width:70px;
    }
    .caption{
        display:block;
        width:100px;
        margin:0 auto;
        background:#333;
        color:#fff;
        text-align:center;
        padding:10px
    }

LIVE DEMO

Answer 2

Snippet:

You can achieve the desired effect as shown below:

 .head_ico_p[title]:hover:after { content:attr(title); background-color:#000000; border:solid 1px #ffffff; padding:5px; color:#ffffff; display:block; width:330px; height:30px; } body { background-color:#dddddd; }

 <p class="head_ico_p" title="profile"><img class="head_ico" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/></p>

How it works:

The :after psudeo-class is used in CSS to add another "element" after the element that is being selected. This element can be effected by all standard styles and selectors, such as :hover . Note that a :before psudeo-class also exists, for adding another "element" before the element being selected.
The content attribute can set the content of an element created by :before or after to a predefined value. This can be specified in the CSS ( content:"xyz"; ) or by an attribute. The latter is what you are looking for, and uses the CSS attr function to pull the contents of an attribute into the CSS code as the value for content .

The code shown in the JSFiddle above uses a combination of the above (and some other basic CSS) to create the desired tooltip effect.

Improvments:

Other answers think that you're wanting it there constantly, this assumes that you want it as a tooltip (like title ). If you don't want it to disappear when you're not hovering, all that you need to do is remove the :hover psudeo-class from the CSS selector making the tooltip.
Maybe consider data attributes rather than title , as title can render a default tooltip on hover (the browser does this). Code with data attributes would simply use data-xyz instead of all occurrences of title . Note that xyz can be replaced by whatever you want.

Answer 3

  <html> <head> <style type="text/css"> .test{ display:inline-block; box-sizing:border-box; width:80px; height:110px; background:url('http://s15.postimg.org/fjgl2u3h3/Cvt_Lr.png') no-repeat #000; color:#fff; background-color:#000; text-align:center; padding-top:85px; } </style> </head> <body> <a class="test" href="#">Profile</a> </body> </html> somethin like that. But you will need to cut the white space from the image. Hope it helps

how can i make css for <p title=“titlehere”></p>

Question

3 answers

solution1
0 2016-02-07 01:54:12

solution2
0 2016-02-07 01:58:20

Snippet:

How it works:

Improvments:

solution3
0 2016-02-07 01:59:01

how can i make css for <p title=“titlehere”></p>

Question

3 answers

solution1 0 2016-02-07 01:54:12

solution2 0 2016-02-07 01:58:20

Snippet:

How it works:

Improvments:

solution3 0 2016-02-07 01:59:01

solution1
0 2016-02-07 01:54:12

solution2
0 2016-02-07 01:58:20

solution3
0 2016-02-07 01:59:01