Title - Alt - Стиль всплывающих подсказок

Такие вещи гуглятся на раз два :)

Один из вариантов.

HTML будет таким

<a href="#" class="tip" title="Hi, There. I like turtles.">Hover over me!</a>

CSS таким

a.tip {

  position: relative;

  text-decoration: none;

}

a.tip:hover:before {

  display: block;

  position: absolute; 

  padding: .5em;

  content: attr(title);

  min-width: 120px;

  text-align: center;

  width: auto;

  height: auto;

  white-space: nowrap;

  top: -32px;

  background: rgba(0,0,0,.8);

  -moz-border-radius:10px;

  -webkit-border-radius:10px;

  border-radius:10px;    

  color: #fff;

  font-size: .86em;

}

a.tip:hover:after {

  position: absolute;

  display: block;

  content: "";  

  border-color: rgba(0,0,0,.8) transparent transparent transparent;

  border-style: solid;

  border-width: 10px;

  height:0;

  width:0;

  position:absolute;

  top: -8px;

  left:1em;

}

<a href="#" class="tip" title="Hi, There. I like turtles.">Hover over me!</a>

a.tip {
  position: relative;
  text-decoration: none;
}
a.tip:hover:before {
  display: block;
  position: absolute; 
  padding: .5em;
  content: attr(title);
  min-width: 120px;
  text-align: center;
  width: auto;
  height: auto;
  white-space: nowrap;
  top: -32px;
  background: rgba(0,0,0,.8);
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;    
  color: #fff;
  font-size: .86em;
}
a.tip:hover:after {
  position: absolute;
  display: block;
  content: "";  
  border-color: rgba(0,0,0,.8) transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  top: -8px;
  left:1em;
}

это для ссылки, а для картинки мне надо, я для ссылок много вариантов находил.

мне для img надо

код этот не учитывает br не делает пробелы если в титле вписал br

Может такой вариант вам подойдет.

Ага работает, но есть но, по мимо этого показывает еще и титле обычное там и альт, как сделать что бы не показывало, просто не хотелось бы что бы у картинки не было титле и альт

Не совсем понял, что вам мешает оставить у картинок alt и title? Вам просто придется продублировать тайтл в атрибуте data-title или вообще сделать его уникальным.

Я это уже понял, просто есть и такой и такой вариант, когда наводишь на картинку тот что со стилем выходит красиво все, но и старый показывает ! тот что обычный ))) мешает как бы.

А как в тайтоле делать пробелы ? я там хотел заголовк типа сделать, по жирнее не вышло, весь код показало в выводе.