HTML-Tooltip position relative to mouse pointer

Question

How to align the tooltip the natural style  right bottom of the mouse pointer    lt  DOCTYPE html gt   lt html gt   lt head gt     lt title gt Tooltip with Image lt  title gt     lt meta charset  UTF-8  gt     lt style type  text css  gt       tooltip           text-decoration none          position relative              tooltip span           display none              tooltip span img           float left              tooltip hover span           display block          position absolute          overflow hidden           lt  style gt   lt  head gt   lt body gt     lt a class  tooltip  href  http   www google com   gt      Google      lt span gt         lt img alt    src  http   www google com images srpr logo4w png  gt       lt  span gt     lt  a gt   lt  body gt   lt  html gt

User · Answer

We can achieve the same using  Directive  in Angularjs                 Bind mousemove event to the element which will show tooltip                 tooltip   mousemove function e                      find X  amp  Y coodrinates                 x   e clientX                  y   e clientY                     Set tooltip position according to mouse position                 tooltipSpan style top    y   20     px                   tooltipSpan style left    x   20     px                     You can check this post for further details  http   www ufthelp com 2014 12 Tooltip-Directive-AngularJS html

User · Answer

This CAN be done with pure html and css  It may not be the best way but we all have different limitations  There are 3 ways that could be useful depending on what your specific circumstances are    The first involves overlaying an invisible table over top of your link with a hover action on each cell that displays an image     x000D   x000D   imagehover td hover  after  x000D    content                   x000D    white-space  pre  x000D    background-image  url  http   www google com images srpr logo4w png    x000D    position  relative  x000D    left  5px  x000D    top  5px  x000D    font-size  20px  x000D    background-color  transparent  x000D    background-position  0px 0px  x000D    background-size  60px 20px  x000D    background-repeat  no-repeat  x000D     x000D    x000D   x000D   x000D   imagehover table   imagehover th   imagehover td   x000D    border  0px  x000D    border-spacing  0px  x000D    x000D   lt a href  https   www google com  gt  x000D   lt table id  imagehover  style  width 50px height 10px z-index 9999 position absolute  cellspacing  0  gt  x000D   lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D   lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D   lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D   lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D   lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D   lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D   lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D   lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D   lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D   lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D   lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D   x000D   lt  table gt  x000D  Google lt  a gt  x000D   x000D   x000D     The second relies on being able to create your own cursor image    x000D   x000D   googleLink  x000D   x000D  cursor  url https   winter-bush-d06c sto workers dev cursor-extern php id 98272  url https   9dc1a5c00e8109665645209c2d036b1c cloudflareworkers com cursor-extern php id 98272  auto  x000D   x000D    x000D   lt a href  https   www google com  id  googleLink  gt Google lt  a gt  x000D   x000D   x000D     While the normal title tooltip doesn t technically allow images it does allow any unicode characters including block letters and emojis which may suite your needs     x000D   x000D   lt a href  https   www google com  title      alt      gt Google lt  a gt  x000D   x000D   x000D

User · Answer

One way to do this without JS is to use the hover action to reveal a HTML element that is otherwise hidden  see this codepen   http   codepen io c0un7z3r0 pen LZWXEw  Note that the span that contains the tooltip content is relative to the parent li  The magic is here   ul list of thrones li  gt  span    display none    ul list of thrones li hover  gt  span    position  absolute    display block            As you can see  the span is hidden unless the listitem is hovered over  thus revealing the span element  the span can contain as much html as you need  In the codepen attached I have also used a  after element for the arrow but that of course is entirely optional and has only been included in this example for cosmetic purposes   I hope this helps  I felt compelled to post as all the other answers included JS solutions but the OP asked for a HTML CSS only solution

User · Answer

You can use jQuery UI plugin  following are reference URLs   http   jqueryui com tooltip  http   bassistance de jquery-plugins jquery-plugin-tooltip  http   jquery-plugins bassistance de tooltip demo    Set track to TRUE for Tooltip position relative to mouse pointer eg    x000D   x000D      tooltip   tooltip   track  true     x000D   x000D   x000D

User · Answer

For default tooltip behavior simply add the title attribute  This can t contain images though    lt div title  regular tooltip  gt Hover me lt  div gt    Before you clarified the question I did this up in pure JavaScript  hope you find it useful  The image will pop up and follow the mouse   jsFiddle  JavaScript  var tooltipSpan   document getElementById  tooltip-span     window onmousemove   function  e        var x   e clientX          y   e clientY      tooltipSpan style top    y   20     px       tooltipSpan style left    x   20     px        CSS   tooltip span       display none     tooltip hover span       display block      position fixed      overflow hidden      Extending for multiple elements  One solution for multiple elements is to update all tooltip span s and setting them under the cursor on mouse move   jsFiddle  var tooltips   document querySelectorAll   tooltip span     window onmousemove   function  e        var x    e clientX   20     px           y    e clientY   20     px       for  var i   0  i  lt  tooltips length  i              tooltips i  style top   y          tooltips i  style left   x

User · Answer

I prefer this technique    x000D   x000D  function showTooltip e    x000D    var tooltip   e target classList contains  tooltip   x000D          e target x000D          e target querySelector   scope  tooltip    x000D    tooltip style left   x000D         e pageX   tooltip clientWidth   10  lt  document body clientWidth  x000D               e pageX   10    px   x000D               document body clientWidth   5 - tooltip clientWidth    px    x000D    tooltip style top   x000D         e pageY   tooltip clientHeight   10  lt  document body clientHeight  x000D               e pageY   10    px   x000D               document body clientHeight   5 - tooltip clientHeight    px    x000D    x000D   x000D  var tooltips   document querySelectorAll   couponcode    x000D  for var i   0  i  lt  tooltips length  i      x000D    tooltips i  addEventListener  mousemove   showTooltip   x000D    x000D   couponcode   x000D      color  red  x000D      cursor  pointer  x000D    x000D   x000D   couponcode hover  tooltip   x000D      display  block  x000D    x000D   x000D   tooltip   x000D      position  absolute  x000D      white-space  nowrap  x000D      display  none  x000D      background   ffffcc  x000D      border  1px solid black  x000D      padding  5px  x000D      z-index  1000  x000D      color  black  x000D    x000D  Lorem ipsum dolor sit amet   lt span class  couponcode  gt consectetur x000D  adipiscing lt span class  tooltip  gt This is a tooltip lt  span gt  lt  span gt  x000D  elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  x000D  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi x000D  ut aliquip ex ea commodo consequat  Duis aute irure dolor in  lt span x000D  class  couponcode  gt reprehenderit lt span class  tooltip  gt This is x000D  another tooltip lt  span gt  lt  span gt  in voluptate velit esse cillum dolore eu x000D  fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  x000D  sunt in culpa qui officia deserunt mollit anim id est  lt span x000D  class  couponcode  gt laborum lt span class  tooltip  gt This is yet x000D  another tooltip lt  span gt  lt  span gt   x000D   x000D   x000D     see also this Fiddle

[css] HTML-Tooltip position relative to mouse pointer

Examples related to css

Examples related to alignment

Examples related to tooltip