How to make a tooltip for incoming list items

Hi,
I am trying to make a tooltip with JQuery for incoming list items. People will enter some text in a textfield en those values will be added to a list. I want to make a tooltip for every list item that will be added to the list. I want the text that people fill in in the textfield to be added in the tooltip, is this possible? And how can I do this? Thanks! This is what I have so far..
<input type="text" id="input" placeholder="Voer item in" /> <button id="button">Toevoegen</button>
<div id="tooltip"></div>
$(document).ready(function(e) {
  $('#button').on('click', function (){
  var toevoegen = $('#input').val();
  var verwijderen = '<a href = "#" class = "verwijderen">Verwijderen</a>'
  <!--add list item-->
  $('#boodschappenlijst').prepend('<li>' + toevoegen + '' + '\t' + verwijderen + '</li>');
<!--remove list item-->
$('#boodschappenlijst').on('click', '.verwijderen', function(){
  $(this).parent('li').remove();
<!-textfield empty-->
$('#input').on('click', function (){
  $(this).val('')
$('#boodschappenlijst').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 appears, but I want the text that people fill in in the textfield to be added in the tooltip

Hi,
I am trying to make a tooltip with JQuery for incoming list items. People will enter some text in a textfield en those values will be added to a list. I want to make a tooltip for every list item that will be added to the list. I want the text that people fill in in the textfield to be added in the tooltip, is this possible? And how can I do this? Thanks! This is what I have so far..
<input type="text" id="input" placeholder="Voer item in" /> <button id="button">Toevoegen</button>
<div id="tooltip"></div>
$(document).ready(function(e) {
  $('#button').on('click', function (){
  var toevoegen = $('#input').val();
  var verwijderen = '<a href = "#" class = "verwijderen">Verwijderen</a>'
  <!--add list item-->
  $('#boodschappenlijst').prepend('<li>' + toevoegen + '' + '\t' + verwijderen + '</li>');
<!--remove list item-->
$('#boodschappenlijst').on('click', '.verwijderen', function(){
  $(this).parent('li').remove();
<!-textfield empty-->
$('#input').on('click', function (){
  $(this).val('')
$('#boodschappenlijst').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 appears, but I want the text that people fill in in the textfield to be added in the tooltip

Similar Messages

  • How to implement tooltip for the list items for the particular column in sharepoint 2013

    Hi,
    I had created a list, How to implement tooltip for the list items for the particular column in SharePoint 2013.
    Any help will be appreciated

    We can use JavaScript or JQuery to show the tooltips. Refer to the following similar thread.
    http://social.technet.microsoft.com/forums/en/sharepointdevelopmentprevious/thread/1dac3ae0-c9ce-419d-b6dd-08dd48284324
    http://stackoverflow.com/questions/3366515/small-description-window-on-mouse-hover-on-hyperlink
    http://spjsblog.com/2012/02/12/list-view-preview-item-on-hover-sharepoint-2010/

  • How to Filter a DVWP for other list items with same name?

    I have 2 lists, Clients & Engagements.
    The Engagements list has a lookup field to the Clients list (to the Title).
    The Engagements list often has more than on listing (job) for the same client at one time. I am trying to create a DisplayForm on the Engagements list that will also include a DVWP that will list all other items in the Engagements list that have
    the same Client Name ([Title]).
    I tried to use a parameter but not sure which one or if that is correct way? I have looked at the Query String but don't see anything in there to relate the other items together.
    The other option is I could use a Workflow to copy the [ID] column from the Clients list into a [ClientsID] column in the Engagement list but I figure there is an easier way since I already have a lookup column linking the two lists.
    Any help or direction would be appreciated.
    Stunpals - Disclaimer: This posting is provided "AS IS" with no warranties.

    Sudip, this is probably me not understanding the correct terminology for each type of webpart it seems in my reading I have either not understood the reference or the writer had them mixed up.
    Just to clarify I am using SharePoint Foundation 2010.
    I have attached a few screenshots so you can see what I am referring to, so we can avoid any confusion or misused terminology. I created a new test site and 2 new lists so I don't have to block out client data.I have created 2 lists Clients & Jobs. The
    jobs has a lookup to the Clients list. I have been trying to create 1 new display form on each list.
    ***Jobs**
    I want to open the DispForm for the job but also at the bottom of the display list all other jobs with the same client name. (seems straight forward)
    I have inserted a DVWP for the Jobs list and when I try to use a connection the filter list has blank columns for both lists.
    While focused on the upper display form section, I use the "Add Connection"  button and select
    "Send Row of Data To",
    Webpart on this page
    Target webpart=Jobs(1), Target Action=Get Filter Values From
    And the columns are blank and can not be changed or selected
    If I start over, still focused on the top Display webpart and select but select Get Filter Value from the columns are then active but obviously this is backwards from what I am trying to do.
    If I try to follow the Get Filter values from while selecting the bottom DVWP that was inserted, again the columns come up blank.
    I have used connections successfully on different pages and even on this page but not in the fashion I am attempting now.
    This is why I thought I could/should be using/passing a value in the query string then use filtering. I have used the ID in the query string previously but that will not work in this scenario.
    I also considering a similar DispForm from the Clients list showing all Jobs for the open client but have the same issue. This would likely be a more appropriate view but I am interested in seeing if both can be done.
    Honestly my gut is saying filtering and query strings is how I should be doing this but again I am no expert. That's where I started a few weeks ago but despite the numerous guides I have found to do this I still can't get it to work. There is either
    missing instructions or skipped steps or it was done in a different version of SPD and I can not find the tab, feature, etc anywhere even after googling and reading.
    Stunpals - Disclaimer: This posting is provided "AS IS" with no warranties.

  • How to write json body for multiple list items to write in a list.

    Hi,
    I am trying to create list items using REST API, and I am reading the data from Sales force and writing it to the list. For wring sigle item its working fine, but if i am trying to insert multiple data to the list using rest API I am getting bad server requesrt
    status code as 400.
     HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(args[0] + "/_api/web/lists/GetByTitle('Contacts')/items");
                request.Method = "POST";
                request.Accept = "application/json;odata=verbose";
                request.ContentType = "application/json;odata=verbose";
                request.Headers.Add("X-RequestDigest: " + requestDigest);
                request.Headers.Add("Cookie: " + cookies);
                string body = "{ '__metadata': { 'type': 'SP.Data.ContactsListItem' }, 'Title': 'Ravish', 'FirstName': 'Verma'}";
                byte[] buf = Encoding.UTF8.GetBytes(body); 
                request.ContentLength = buf.Length;
                request.GetRequestStream().Write(buf, 0, buf.Length);
                var response = (HttpWebResponse)request.GetResponse();
    In the above code highlighted, line of code works fine, for single item, but if I am giving string values as 
                string body = "{ '__metadata': { 'type': 'SP.Data.ContactsListItem' }, [{'Title': 'Ravish', 'FirstName': 'Verma'},{'Title': 'Verma', 'FirstName': 'Ravish'}]}";
                string body = "{ '__metadata': { 'type': 'SP.Data.ContactsListItem' }, [{'Title': 'Amireddy', 'FirstName': 'Kishore'},{'Title': 'Amireddy', 'FirstName': 'Kishore'}]}";
                string test = "{ '__metadata': { 'type': 'SP.Data.ContactsListItem' }, 'Title': 'Amireddy', 'FirstName': 'Kishore'}";
                string body = "{ '__metadata': { 'type': 'SP.Data.ContactsListItem' }, 'Title': 'Ravish', 'FirstName': 'Verma'}";
    All the above format give bad server request.
    if any one has the idea to send multiple items in the request body, please provide me the sample code.
    Thanks in Advance.

    The SharePoint 2013 REST API does not support "batch" or multiple inserts in one call at this time.
    Blog | SharePoint Field Notes Dev Tools |
    SPFastDeploy | SPRemoteAPIExplorer

  • How to implement tool-tip for the list items for the Choice column in SharePoint 2013

    I had created a simple list with a "Choice" column, i have three entries in my drop-down, 
    First Entry
    Second Entry
    Third Entry.
    If i select any entries in drop-down and hour-over (Second Entry), a
    tool-tip need need to show. 
    Is it possible? If yes how to implement any help will be appreciated.

    Hi,
    We can use JavaScript to achieve it.
    The following code for your reference:
    <script type="text/javascript" src="/sites/DennisSite/Shared%20Documents/js/wz_tooltip.js"></script>
    <script type="text/javascript" src="/sites/DennisSite/Shared%20Documents/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
    $(function () {
    $("select[title='Choice']").change(function(){
    Tip($(this).val());
    $("select[title='Choice']").mouseout(function(){
    UnTip();
    </script>
    Download wz_tooltip.js:
    http://www.walterzorn.de/en/tooltip/tooltip_e.htm#download
    Best Regards
    Dennis Guo
    TechNet Community Support

  • How to Create a Dynamic http address that opens the Explorer Window for a List Item When a Button Is Clicked--Currently Trying to Make this Work with Javascript

    I have created a button (via Content Editor) that uses JavaScript to open the Attachments folder of a list item in the Explorer Window in SharePoint 2010. The purpose is to have drag and drop functionality for each list item, having multiple attachments.
    The button works but opens the "Attachments" folder containing all of the other folders for each list item (one folder per item). It seems that when you add an attachment to a list item, SharePoint numbers the folder based on the item's ID. What
    I'm trying to do is take the JavaScript I have and have it run when a button is clicked in a custom form. When it runs, I'm trying to get it to open the "specific" folder for the list item. I have had success creating a hyperlink in the list that
    does this; however, the link WILL NOT work until I use the Content Editor created button that runs JavaScript, that prompts me to click OK to my profile certificate, and then opens the Attachment folder. After that occurs, I can use my hyperlinks without issue
    because I'm no longer prompted to click OK for my cert.
    So I'm trying to take the JavaScript I have and place it in a list item form (custom form) and have it run when a form button is clicked. The problem is I have very little knowledge of JavaScript (did I mention little?) and
    "don't know how to take the "http:" address I have in the script and append to it the list item ID, according to the record I have open."
    So that for any record I open, the script will grab the corresponding record ID (or list item ID) and append it.
    Here's the script I'm working with (which I didn't create but am grateful for):
    <style>
    .httpFolder {behavior:url(#default#httpFolder);}
    </style>
    <script text = "javascript">
       function fnOpenFolderView(){
       oDAV.navigateFrame("https://server/collection/site/subsite/Lists/Sublist/Attachments","_self");
    </script>
    <div id = "oDAV" class = "httpFolder"/>
    <input type = "button" value = "Open Attachment Folder" onclick = "fnOpenFolderView()"/>
    The above script, in the Content Editor, creates a button that opens the Attachments folder for the corresponding SharePoint list.
    JackSki123

    Hello Thriggle,
    Thank you for pointing that out. I appended your "GetUrlKeyValue" to the end and it worked. That said, I noticed it doesn't run as smoothly as when I simply click on the Content Editor button I created that resides on the SharePoint List
    ASPX page (not the form). The Content Editor button has the same code, minus the "GetUrlKeyValue". I click it; I get prompted to choose my cert; it opens right up.
    Now go to the ASPX Display form where I dump the code in a table cell. Button appears in cell; I click it; wait; wait; I get prompted for cert; it opens. Do I need some sort of "throttle" for the JavaScript? For instance, I thought before running
    JavaScript, you reference the library first. This code doesn't do that. I'm wondering if there's something more I need to make this run smoothly. Thank you both for getting me this far. 
    JackSki123

  • How to make a form for input in web interface builder

    Hi expert:
        How to make a form for input in web interface builder?I have already used it to do PS planning, but I don't know how to  draw lines and checkboxes . Thanks in advance.
    Allen

    WAD:
    Open the WAD and create a new template. On the left hand navigation you will have several Web Items available. Under 'Standard' you have 'Analysis' item. Pull that into your template to the right. Under the Properties tab you need to pick the query [form/layout] that you have built in Query Designer.
    You will also find other items such as Button group, Checkbox, drop down, list box etc available. Pick and drag into the template whatever it is you require. Lets say you want a button. Under the Properties tab select the 'Command' that you require. You could use standard commands that are available there. You could also define functions and commands that you require.
    Query Designer:
    Open the QD and drag the characteristics and key figures that you require into the rows and columns of the QD. You would need to specify restrictions under the Filter tab of the QD based on the granularity of data that you require. You would need to remember that the key figures need to be made Input Ready [do this by clicking on KF and on the planning tab select "change by user and planning functions"].
    This shouldgive you a start. After you've explored it yourself a bit we can discuss further and I can certainly provide you additional details/material on these areas.
    Srikant

  • How to make exception rules for Stylish rules which change fonts?

    How to make exception rules for Stylish rules which change fonts?
    I use [https://addons.mozilla.org/en-US/firefox/addon/stylish/ Stylish add-on] to change specific fonts to other fonts of my choice, but I have a problem. I want to change the font Arial to Tahoma in almost all pages I visit, but with the exception of websites as wikipedia.org. Because of this, I find myself having a very long list of domains to change Arial to Tahoma, only because I don't want that rule to apply to wikipedia.org and additional one or two other websites.
    The current rule I'm using is, (my actual list is a lot longer, but this is just an example):<br/>
    '''''@-moz-document domain("mozilla.org"), domain("thefreelibrary.com"), domain("sil.org"), domain("ethnologue.com") {'''''<br/>
    '''''@font-face { font-family: 'Arial'; src: local('Tahoma'); }'''''<br/>
    I can't use the following rule because I don't want it to apply to wikipedia.org:<br/>
    '''''@font-face { font-family: 'Arial'; src: local('Tahoma'); }'''''

    Try something like this:<br />
    <br />
    <pre><nowiki>@font-face { font-family: 'Arial'; src: local('Tahoma'); }
    @-moz-document domain(wikipedia.org){
    @font-face { font-family: 'Arial'; src: local('Arial'); }
    </nowiki></pre>

  • Please help ... have new samsung ativ se windows 8 phone ... screen lock is on to require password, but on incoming calls its not locked ... how do i lock it for incoming calls too ???? thanks

    please help ... have new samsung ativ se windows 8 phone ... screen lock is on to require password, but on incoming calls its not locked ... how do i lock it for incoming calls too ???? thanks

    Personal rant, why do people write the entire problem in topic line
    It's not possible with Windows Phone 8.  What's the point, a call is coming in and the phone allows you to answer.

  • How to make a group for selectd Object javascript

    How to make a group for selectd Object javascript

    There is currently no native way to email groups from iPad.
    The only way to do this is if your recipients are already members a a distribution group controlled elsewhere such as a Google Group or an  Exchange Organisation, then you can email the distribution group address which will then in turn forward to the individual email address of the members.
    Does it have to be email as currently you would have to add each recipient to the email manually.
    iOS to my knowledge doesn't support contact groups in context other than organisation.

  • How to make S-Curve for Primavear P6 by using BI publisher?

    Hi,
    Anyone knows how to make S-Curve for Primavear P6 by using BI publisher? I can display colunm such as planned unit, but not cumulative value. So I can't plot S-curve.
    Thanks
    Wang Xin
    Edited by: 957906 on 09-Sep-2012 03:26

    The problem with the datagridview is that it can only show one table.
    For more tables 3th party datagrid's are better. 
    Although you can start with using the old datagrid. Despite what is written on MSDN is it a complete different control then the datagridview. You can add in to your toolbox by right clicking on it and then add it.
    The datasource of a DataGrid can be a complete dataset which is showed with all its relations.
    Success
    Cor

  • How to make a CheckBox for a report parameter?

    Hi,
    How to make a CheckBox for a report parameter?
    thanx

    design ur parameters forms using forms and call ur report form there

  • How to make a installer for iphone application

    hi, dear all, I have made a iphone application by XCode , it can running perfect on emulator . I want it can be install on real device , how to do it ? how to make a installer for my iphone application ?
    thanks to your response .

    If you go to the iPhone DEV area on Apple.com you can get a installer app once you are a developer. This installer will let you use apps for your own use. This installer app also supports up to X amount of phones you can install the application on. I thought it was set at 100 but could be now up to 500.

  • How to make a wall for a game

    hello developers
    I’m sharing a long time to find out how to make a wall for my game but now where is it.
    Can someone help me?
    its a wall for an iphone/ipod game.
    It must be a wall that a sprite will stop walking it’s not a killer object but a stop object.
    oh and are there differants in programing in ipad/iphone?
    Thanks for help
    Grtz Jimmy

    I don't know what's you point on the wall and the player but you should do something as that:
    -(IBAction)goLeft
         if (player.x > wall.xo && player.x < wall.xI)
                  // you are in the wall go right
              if(player.y > wall.yo && player.y < wall.yI)
                 // you are in the wall go right
                 player.x ++;
              else ; // you are up or down of wall
    -(IBAction)goRight
        if (player.x > wall.xo && player.x < wall.xI)
              if(player.y > wall.yo && player.y < wall.yI)
                 // you are in the wall go left
                 player.x --;
               else ; // you are up or down of wall

  • How to make a program for backgroung processing used servlet

    how to make a program for backgroung processing used servlet

    well i need the coding part written in servlet ,in which servlet is always ready for accepting a client request.

Maybe you are looking for