CODEWITHSUNDEEP
htmlcssangularjs
Dreams
Dreams

Reputation: 6122

Tooltip on hover on element

I was following this example for a tooltip on hover. I am unable to do so when I have a class already assigned to the element tag <i>. I found out I can assign 2 classes to the same element by having them separated by space. But, the icon disappears if I have class tooltip.

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<td>
  <i class="material-icons tooltip" ng-click="view(application._id)" data-toggle="tooltip" title="Hooray!">
    receipt
  </i>
  <span class="tooltiptext">Tooltip text</span> &nbsp;&nbsp;
  <i class="material-icons" ng-click='edit(application._id)' style="color:red">
    edit
  </i> &nbsp;&nbsp;
  <i class="material-icons" ng-click="remove(application._id)" style="color:red">
    delete
  </i>
</td>

How can I have a tooltip with hover on these icons <i class="material-icons">? In my css, tooltip is visibility: hidden; . is it because of this? how to correct it?

Edit - I have added the style-sheet which If i include, the icon is invisible.

I have created a jsfiddle - https://jsfiddle.net/TTrain/r5hhkwLb/

Upvotes: 4

Views: 10334

Answers (4)

Pietro Terracciano
Pietro Terracciano

Reputation: 135

Hei man! I'll try to answer You as easily as possible

You don't need a new class for tooltip effect

HTML :

I'm using Font Awesome Framework, like as Your

<body>

    ... HTML CONTENT ...

    <i class="fa fa-facebook">
        <span>My beautiful tootip</span>
    </i>

    ... OTHER HTML CONTENT ...

</body>

CSS :

i {
    position: relative; /** ADD THIS TO i TAG. This do magic! It's necessary **/
}

i span {
    visibility: hidden;
    opacity:  0;
    position: absolute; /** It's necessary to do magic **/
    bottom: -32px; /** Show Tooltip 32px bottom "i" tag. Depends on "i" tag height =) **/
    left: 0;
    text-align: center; /** If You want tooltip text centered **/
    padding: 5px; /** Tooltip padding **/
    width: 150px; /** Tooltip width. You can set 100% to cover all "i" tag **/
    height: auto; /** Auto is good choice **/
    background: #000; /** Tooltip background **/
    color: #fff; /** Tooltip text color **/
}

i:hover span {
    visibility: visible;
    opacity: 1;
}

ADDITIONAL - Perfect! But I want a beautiful animation (transition). How I can do it?

Add to above CSS code, this lines

i span {
    
    /** ... OTHER RULES SEE ABOVE ... **/

    transition-duration: 0.2s; /** Animation duration **/
    transition-property: opacity; /** Apply animation only on opacity rule **/
    
    /** Compatibility with other Browsers */
    -moz-transition-duration: 0.2s;
    -moz-transition-property: opacity;
    -o-transition-duration: 0.2s;
    -o-transition-property: opacity;
    -ms-transition-duration: 0.2s;
    -ms-transition-property: opacity;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-property: opacity;
}

Upvotes: 2

User that hates AI
User that hates AI

Reputation: 468

you have an closing </i> in your code line. If you place it at the end it wouldn't work either as the tooltip's text would be unreadable. You have to do something like this:

    <span class="tooltip"><i class="material-icons" ng-click="view(application._id)" >receipt</i><span class="tooltiptext">Tooltip text</span></span>&nbsp;&nbsp;

Paul

PS: It is working at my PC. I created a fiddle for it. https://codepen.io/anon/pen/mBQboL. I were not able to include the icon font but the icon is not disappearing.

Upvotes: 1

benok
benok

Reputation: 125

Maybe you can use Title="Tooltip Text" inside the i tag or any element like img. It's easier ^_^

Upvotes: 3

Liaqat Saeed
Liaqat Saeed

Reputation: 428

place Span inside i tag

You have problem in this

 <i class="material-icons tooltip" ng-click="view(application._id)" >receipt</i><span class="tooltiptext">Tooltip text</span>&nbsp;&nbsp;

Solution

  <i class="material-icons tooltip" ng-click="view(application._id)" >receipt<span class="tooltiptext">Tooltip text</span></i>&nbsp;&nbsp;

Upvotes: 1

Related Questions