'Using jQuery UI Tooltip with custom arrow causes tooltip issue

I'm using Tooltip custom style plugin...

Now I want to display my tool tip message as displayed on these sites and as shown in the photo (e.g., with an arrow to be part of the tooltip):

enter image description here

I try to apply several CSS rules, but I'm still not able to get it to look the way I want... please help me. Here is my CSS code:

body .ui-tooltip {
  border-width:0;
}

.ui-tooltip,.arrow:after {
  background:black;
  border:0 solid white;
}

.ui-tooltip {
  padding:10px;
  color:white;
  border-radius:5px;
  font-family:Verdana, sans-serif;
  font-size:12px;
  text-transform:none;
}

.arrow {
  width:70px;
  height:16px;
  position:absolute;
  left:0!important;
  margin-left:-25px;
  top:55%;
}

.arrow.top {
  top:-16px;
  bottom:auto;
}

.arrow.left {
  left:20%;
}

.arrow:after {
  content:"";
  position:absolute;
  left:20px;
  top:-20px;
  width:25px;
  height:25px;
  box-shadow:6px 5px 9px -9px black;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  tranform:rotate(45deg);
}

.arrow.top:after {
  bottom:-20px;
  top:auto;
}

.ui-tooltip {
  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  filter:alpha(opacity=70);
  opacity:0.7;
}

My display when I apply the above CSS code does not display a full tooltip:

i.imgur.com/4yCPu.png

But I want it to look like this, full size:

enter image description here

My CSS code arrow has problems and it's doesn't look like the example I provided.

Edit:

Arrow problem is ok now... but if you see wanted display it's not same as i want 

.ui-tooltip {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  opacity:0.7;
}

I guess they haven't above CSS code... could you any one suggest to how their transparent work

jqueryhtmlcssjquery-uitooltip


Solution 1:[1]

Seems like the position of the arrow is a little messed up. I can not give you the specific values as i can not test it. but i am sure playing with the width and left property of the .arrow element will give you desired results.

Try the following.

.arrow {
    width: 15px;
    height: 6px;
    position: absolute;
    top: 50%;
}

.arrow.left {
    left: -12px;
}

Solution 2:[2]

Currently, jQuery UI Tooltip has an Open Issue #6 which defines your arrows as connectors and they are not yet implemented in this plugin.

If your adding your own connector markup for fancy arrows, the tooltip may change location based on the elements location relative to the browsers viewport. This may cause your arrow to be in the wrong location.

Instead, use jQuery qTip Plugin which includes arrows as an option, I mean connectors, that will calculate the correct location automatically.

Here's a screenshot, but all corner connector examples for this tooltip plugin are seen HERE.

enter image description here

The blue text in the photo above will demo the qTip tooltip to be placed at the bottom left. Having said that, the tooltip itself knows to put the triangle shaped thing at the top right.

Solution 3:[3]

@Robinson You can also use Bootstrap Tooltip, which is quite easier to use and when you use it, you just have to include the CSS and JS files that you can Download from here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 arttronics
Solution 3 V15HM4Y

Related Questions