How to create a generic tooltip with jquery that only passes the parameters to use it? [closed]

Question

How to create a generic tooltip with jquery that only passes the parameters to use it? [closed]

Navigation

#1 by (1 votes)

0

I want to create a generic tooltip that can only be used pasasole parameters such as text and style.

jquery html5 css3

asked by JessússGaarcíaa 15.11.2018 в 20:53

source

1 answer

database limit with parameters dependent on query count Does anyone know why I get the datetime?

score 1 · Answer 1

As they said well in the comments there are many ways to make a tooltip. The best way (if you do not want to use a lot of code / boostrap) is with Jquery.

Approach

The function .attr () would be used, which allows you to take the value of an attribute without it being valid for html .

Next, you would create an element with the .prepend () function that allows you to add text within the element.

After that you do a hover event and then use the .find () function that allows you to search within an element .

And we would add a class with the function .css () that allows you to modify the css

And well, after considering what the code would be basically just need to add the css and html

JQUERY

$(document).ready(function(){
  $(".tooltip").css("visibility","hidden");
  var mensaje = $(".tooltip-element").attr("tooltip-info");
  $(".tooltip-element").prepend(''+mensaje+'');
  $(".tooltip-element").hover(function(){
     $(this).find(".tooltip").css("visibility","visible");
  },function(){
     $(this).find(".tooltip").css("visibility","hidden");
  });
});

CSS

CSS allows you to position the item you touch

.tooltip-element{
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip-element .tooltip{
    visibility:hidden;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    background-color: #555;
    color: #fff;
    margin-left: -60px;
    text-align: center;
    padding: 5px 0;
}

HTML

An example text with 2 tooltips

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Test

link