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.
1
-
Possible duplicate of How to add a tooltip to a divAurora0001– Aurora00012017-02-04 15:08:02 +00:00Commented Feb 4, 2017 at 15:08
Add a comment
|
2 Answers
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
Comments
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>
1 Comment
user2568276
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.