Question 42773 in Html Question posted in
Some basic documentation can be found here.

Add tooltip to icon using css alone – Html

I have a Drupal generated html markup that contains a button. I added an icon next to the button using the below css:

#edit-actions--3::after{
    content: url("/themes/custom/mytheme/assets/icons/tooltip.svg");
    display:inline-block;
    width:2%;
    margin-left: 0.4rem;
  }

to this tooltip.svg icon, i want to add a tooltip text on hover as "this is a tooltip icon". how to do this with css alone?

PS: I cannot edit the HTML markup to add tooltip text to a span tag. so I am looking for a way to add tooltip text only through css

Tags:

2

Answers


  1. 0

    I can’t find your svg.
    so i got some icon from Drupal.
    replace and use that.

    #edit-actions--3::after{
    display: inline-block;
    vertical-align:top;
    background: url(https://www.drupal.org/sites/all/themes/bluecheese/images/icon-w-bulb.svg) no-repeat .2rem .1rem/ 1.5em #0678be;    
    width: auto;
    margin-left: 0.4rem;    
    padding: 0.1rem 1rem 0.4rem 2.3rem;
    color: #fff;
    border-radius: 0.2rem;    
    content: 'This is a tooltip icon';
  }
    <div class="item" id="edit-actions--3">test</div>
    Login or Signup to reply.
  2. 0

    setting defualt as a display:none;
    and hover make that display:inline-block;

    #edit-actions--3::after{
    display: none;
    vertical-align:top;
    background: url(https://www.drupal.org/sites/all/themes/bluecheese/images/icon-w-bulb.svg) no-repeat .2rem .1rem/ 1.5em #0678be;    
    width: auto;
    margin-left: 0.4rem;    
    padding: 0.1rem 1rem 0.4rem 2.3rem;
    color: #fff;
    border-radius: 0.2rem;    
    content: 'This is a tooltip icon';    
  }
  #edit-actions--3:hover::after{
    display:inline-block;
  }
    <div class="item" id="edit-actions--3">test</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search