0

I have a list of items displayed in a grid on the screen. As I hover the mouse over the items, I'd like to show a specific tooltip for each item. How can I accomplish that using javascript, jquery or angular js, please? Thanks.

user2568276
  • 89
  • 2
  • 13
  • Possible duplicate of [How to add a tooltip to a div](http://stackoverflow.com/questions/7117073/how-to-add-a-tooltip-to-a-div) – Aurora0001 Feb 04 '17 at 15:08

2 Answers2

0

You could just add the html attribute "title" to the items. As example, lets say your items is an ordered list. just do it like this:

<ol>
   <li title='this is item number one'>Item One</li>
   <li title='this is the second items'>Item Two</li>
   <li title='third!'>Item Three</li>
</ol>

For more fancy tooltip, you could just use CSS. Or for me, I usually use Bootstrap for my project, so I just use Bootstrap Tooltip which is:

<li data-toggle="tooltip" title="This is item no 1!">Item One</li>
Afif Zafri
  • 640
  • 1
  • 5
  • 11
  • I forgot to mention that the "value" of the tooltip can't be coded in the html. the list is retrieved from a database, depending on the search criteria provided by the user. the tooltip will depend on some information in each line, that is, I'll have an attribute in the line that will determine the value of the tooltip. thanks. – user2568276 Feb 04 '17 at 20:26
0

You can use angular ui tooltip.

$scope.titles = [
    {
      "id" : 1,
      "title" : "title1",
      "tooltip" : "tip1"
    }, 
    {
      "id" : 2,
      "title" : "title2",
      "tooltip" : "tip2"
    }, 
    {
      "id" : 3,
      "title" : "title3",
      "tooltip" : "tip3"
    }, 
    {
      "id" : 4,
      "title" : "title4",
      "tooltip" : "tip4"
    }, 


  ]

in HTML

<p ng-repeat = "x in titles" tooltip-placement="top-left" uib-tooltip="{{x.tooltip}}">{{x.title}}</p>

Have a look at plunker

nishant agrawal
  • 471
  • 2
  • 7