CODEWITHSUNDEEP
jqueryhtmlcss
Abhishek Singh
Abhishek Singh

Reputation: 1517

Hide default title tooltip

enter image description here

We can see above images, on hover of "create" button, two tooltips are coming. here I dont want default tooltip (small one below).

I want to show only my customize tool tip

My Code:

<style>
button[title]:hover:before {
  content: attr(title);
  padding: 2px 2px;
  color: #333;
  position: absolute;
  left: 100px;
   top: 320px; 
  z-index: 20;
  white-space: nowrap;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
  </style>

<button onclick="setActionAndSubmit('id_form_workitem_create', 'create');" title="please fill all mandatory fields">
									 	Create
</button>

Please help, thanks in advance

Upvotes: 0

Views: 6996

Answers (2)

Guilherme Fujiyoshi
Guilherme Fujiyoshi

Reputation: 471

The small tooltip that appears is being displayed because you set the title attribute in your DOM node. In the following JSFiddle, the solution proposed is to change the attribute that holds the tooltip content in the button and in the CSS.

JSFiddle

Upvotes: 2

dgavian
dgavian

Reputation: 250

The one that you want to take out is coming from your title attribute - if you remove that attribute it'll get rid of it, but you'll have to change your selector and hard-code your content, since both of those are relying on the title being there.

Upvotes: 0

Related Questions