CSS: How to change tooltip position to align to triggering element (rest of code working)


Tags: css,css3,position,css-position

Problem :

I am trying to build a tooltip (without using plugins) and to position it on the right side of the triggering element (here an input field), vertically aligned.

So far I have the below (see Fiddle demo). This gives me the tooltip I want with the correct layout and content and displays it correctly by click in the input field but I can't find a way to position it right from the input field (instead of in the middle of the screen).

$(document).ready(function() {
  $('.tooltipClose').on('click', function() {
    $(this).closest('div.tooltip').removeClass('tooltipShow');
  });

  $('.triggerTooltip').on('click', function() {
    $(this).next('div.tooltip').addClass('tooltipShow');
  });
});
.tooltip {
  -moz-transition: opacity 400ms ease-in;
  -webkit-transition: opacity 400ms ease-in;
  bottom: 0;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  left: 0;
  right: 0;
  filter: alpha(opacity=0);
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transition: opacity 400ms ease-in;
  z-index: 99999;
}
.tooltipClose {
  background: #028dca;
  border-radius: 12px;
  box-shadow: 2px 2px 3px #666;
  color: #fff;
  font-weight: bold;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  text-decoration: none;
  top: -12px;
  vertical-align: middle;
  width: 24px;
}
.tooltipClose:hover {
  background: #00507e;
}
.tooltipFooter,
.tooltipHeader {
  border-bottom: 2px solid #ccc;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  padding: 8px 0;
  vertical-align: middle;
}
.tooltipShow {
  filter: alpha(opacity=100);
  opacity: 1;
  pointer-events: auto;
}
.tooltip > div {
  background: #fff;
  border: 3px solid #028dca;
  border-radius: 10px;
  margin: 10% auto;
  padding: 8px 16px;
  position: relative;
  width: 200px;
}
.tooltip > div:after {
  border-bottom: 12px solid transparent;
  border-right: 12px solid #028dca;
  border-top: 12px solid transparent;
  content: '';
  height: 0;
  left: 0;
  margin: -12px;
  position: absolute;
  right: 50%;
  top: 50%;
  width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- to see tooltip in the demo -->
<div style="height: 200px;"></div>
<input type="text" class="triggerTooltip" />
<div class="tooltip">
  <div>
    <a href='javascript:void(0);' class='tooltipClose'>X</a>
    <p class='tooltipHeader'>Tooltip header</p>
    <p class='tooltipBody'>Tooltip content</p>
  </div>
</div>

Demo:
Fiddle



Solution :

You've nearly done all the job. Here you have an update version of your Fiddle

Here come the small modifications

$('.triggerTooltip').on('click', function(){

    // First set the vertical position, use the half of the tooltip height
    $('div.tooltip').css('top', $('div.tooltip div').height()/2);

    // And for the horizontal position we just substract the field's width
    $('div.tooltip').css('left', $(this).offset().left-$(this).width());


    $('div.tooltip').addClass('tooltipShow');

});

Hope it's gonna help you


    CSS Howto..

    How to style a table cell in JavaFX2 using CSS (without removing hover/selection etc.)

    how to give dynamic height in css

    How to format the text below using css

    CSS Menu - how to [closed]

    how to remove element.style in css

    How to make multiple breaks using CSS?

    How to debug CSS with Firebug for an element that only appears when clicked?

    How to correctly apply the .clearfix:after class to HTML?

    How to have a background image wider than the content area of a website (without scrollbars)

    How to use CSS to center the buttons?

    How can I get this menu to hug the top of the page, widen out, and provide some space below it?

    How to get the correct mouse position in relation to a div that has has a scale transform applied

    How make a fixed element be on top of another position fixed element

    how to order CSS elements?

    How to clip canvas with CSS clip-path?

    How to add CSS class to asp.net from code behind [closed]

    How to implement this to my index.html?

    How to change the scrolling text in CSS or JQuery

    How to animate the filling of a html element

    How to vertically align html radio buttons with CSS-only in this code?

    Css. How to move div with fixed position up if it overlays footer

    CSS: Is there a limit on how many classes an HTML element can have?

    How can I add fixed background just to this section? [demo included]

    How can I draw such 2 lines in this shape using CSS HTML

    How can I style this php with divs?

    How can I make an svg scale with its parent container?

    How to block CSS and js file loading in Google Blogger template?

    how to replace a link name text

    How to highlight the menu item for the sort type of data on the page?

    How to create a panel tab?