Home / Questions / 4271
Accepted
MBahamondes
Asked: 2020-02-17 06:29:16 +0800 CST 2020-02-17 06:29:16 +0800 CST

Position Jquery UI Tooltip

  • 772

I have a table with several inputs together and I use the Tooltip plugin of Jquery UI, to display a message when the fields are required, my problem is in the position of the tooltips that appear one on top of the other and what I want is for each tooltip to be seen in its entirety. each input.

This is how it looks now:

enter image description here

I've been reading the Position api of Jquery UI, option-Position , but I can't find the solution.

js code:

$(input).tooltip({
        content: mensaje,
        items: "input.obligatorio",
        track: true,
        show: true,
        tooltipClass: "tooltip-error"
});

HTML:

<div class="col-xs-5" style="height: 103px;">
     <table class="table">
          <thead class="text-center">
                                        <tr class="cabeceraDos">
                                            <th>
                                                Columna 1
                                            </th>
                                            <th>
                                                Columna 2
                                            </th>
                                            <th>
                                                Columna 3
                                            </th>
                                            <th>
                                                Columna 4
                                            </th>
                                            <th>
                                                Columna 5
                                            </th>
                                            <th>
                                                Columna 6
                                            </th>
                                            <th>
                                                Columna 7
                                            </th>
                                            <th>
                                                Columna 8
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <asp:TextBox runat="server" CssClass="form-control obligatorio" MaxLength="1" ID="txt_column1"></asp:TextBox>
                                            </td>
                                            <td>
                                                <asp:TextBox runat="server" CssClass="form-control obligatorio" MaxLength="1" ID="txt_column2"></asp:TextBox>
                                            </td>
                                            <td>
                                                <asp:TextBox runat="server" CssClass="form-control obligatorio" MaxLength="1" ID="txt_column3"></asp:TextBox>
                                            </td>
                                            <td>
                                                <asp:TextBox runat="server" CssClass="form-control obligatorio" MaxLength="1" ID="txt_column4"></asp:TextBox>
                                            </td>
                                            <td>
                                                <asp:TextBox runat="server" CssClass="form-control obligatorio" MaxLength="1" ID="txt_column5"></asp:TextBox>
                                            </td>
                                            <td>
                                                <asp:TextBox runat="server" CssClass="form-control obligatorio" MaxLength="1" ID="txt_column6"></asp:TextBox>
                                            </td>
                                            <td>
                                                <asp:TextBox runat="server" CssClass="form-control obligatorio" MaxLength="1" ID="txt_column7"></asp:TextBox>
                                            </td>
                                            <td>
                                                <asp:TextBox runat="server" CssClass="form-control obligatorio" MaxLength="1" ID="txt_column8"></asp:TextBox>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
</div>
jquery

2 Answers

  1. As you indicate in the question, you can use the position option ( position) to indicate where the tooltip will be displayed. The position is an object that contains different values ​​( source ) of the ones you are interested in atand my.

    One possibility is to change the code a bit so that this position is added:

    $(input).tooltip({
    content: mensaje,
    items: "input.obligatorio",
    track: true,
    show: true,
    tooltipClass: "tooltip-error",
    position: { my: "left bottom", at: "left bottom" }
});

    But this would not be enough because since they all inputhave the same value they continue to be mounted on top of each other. So, what should be done is to change the code a bit more so that inputeven tooltips are displayed in one position, while odd ones are displayed in another. For it:

    $(input).each(function(index) {
    var pos = index % 2 ? "left bottom+20" : "left bottom-20";
    tooltip({
        content: mensaje,
        items: "input.obligatorio",
        track: true,
        show: true,
        tooltipClass: "tooltip-error",
        position: { my: pos, at: pos }
    });
});

    Thus they are displayed at different heights (although some may still overlap). An example:

    $(document).ready(function() {

  var mensaje = "Complete este campo.";

  $("input").each(function(idx) {
  	
    var aux = idx % 2 ? "left bottom+20" : "left bottom-20";

    $(this).tooltip({
      content: mensaje,
      items: "input.obligatorio",
      track: true,
      show: true,
      tooltipClass: "tooltip-error",
      position: { my: aux, at: aux }
    });
  });


});
    input.obligatorio {
  width:30px;
  height:30px;
  text-align:center;
  position:relative;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<table>
  <tr>
    <td><input type="text" class="obligatorio"></td>
    <td><input type="text" class="obligatorio"></td>
    <td><input type="text" class="obligatorio"></td>
    <td><input type="text" class="obligatorio"></td>
    <td><input type="text" class="obligatorio"></td>
    <td><input type="text" class="obligatorio"></td>
  </tr>
</table>

    You could play with the variable indexto position the tooltip where you want depending on its value. Alternatively, you could also create your own styles and add them tooltipClassinside the each.

    • 2
  2. Best Answer

    You can use CSS to solve it:

    Applying one more class to identify each cell, similar to the zebra strategy in a table style:

    <td>
    <asp:TextBox runat="server" CssClass="form-control obligatorio even" MaxLength="1" ID="txt_column1"></asp:TextBox>
</td>
<td>
    <asp:TextBox runat="server" CssClass="form-control obligatorio odd" MaxLength="1" ID="txt_column2"></asp:TextBox>
</td>
....

    And have two different loads

    $('input.even').tooltip({
        content: 'mensaje',
        items: "input.obligatorio",
        track: true,
        show: true,
        tooltipClass: "tooltip-error"
});
$('input.odd').tooltip({
        content: 'mensaje',
        items: "input.obligatorio",
        position: {
          my: "center bottom-50",
          at: "center top"
        },
        track: true,
        show: true,
        tooltipClass: "tooltip-error"
});

    In this example the tooltip is loaded a little lower. I hope it helps you

    Here a jsfiddle

    • 2