I'm currently working on creating a tooltip using JQuery for incoming list items. Users will input text in a textfield, press enter, and those values will be displayed in a visible list on the website. I intend to have a tooltip associated with each item added to the list that displays the text entered by the users. Is it possible to achieve this? If so, how can I implement it? Thank you! This is my progress so far..
<div id="tooltip"></div>
<input type="text" id="input" placeholder="Enter item" /> <button id="button">Add</button>
<ul id="grocery-list">
</ul>
----------------------------------------------------------------------------
$(document).ready(function(e) {
$('#button').on('click', function (){
var addItem = $('#input').val();
var removeItem = '<a href="#" class="remove">Remove</a>'
<!--add list item-->
$('#grocery-list').prepend('<li>' + addItem + '' + '\t' + removeItem + '</li>');
});
<!--remove list item-->
$('#grocery-list').on('click', '.remove', function(){
$(this).parent('li').remove();
});
<!-textfield empty-->
$('#input').on('click', function (){
$(this).val('')
});
$('#grocery-list').hover(
function (){
$('#tooltip').css('display', 'block')
},
function (){
$('#tooltip').css('display', 'none')
};
);
}) ;
----------------------------------------------------------------
#tooltip {
position: absolute;
top: 100px;
right: 300px;
border: 1px solid #000000;
border-radius: 5px;
color: black;
width: 100px;
display: none;
}
The tooltip is visible, but I would like the text entered in the textfield to be shown in the tooltip. Feel free to reach out if you require more information. Thank you in advance (verwijderen = remove, toevoegen = add)