Custom Styled Tooltips

Question

Я хотел бы создать пользовательскую стилизованную подсказку, зависающую по ссылке.
Google'd почти весь интернет и ничего не нашел ...
Я бы хотел, чтобы моя пользовательская подсказка имела фоновый рисунок, который может иметь прозрачный фон в виде изображения png.

И некоторые регулировки, так что текст будет появляться на этом фоне. Возможно? :>

Answer 1

Это возможно, но это может усложниться в зависимости от того, если вы хотите быть пуленепробиваемым, для легкой части:

1. Сделайте div и установите значение position на fixed или absolute, придайте ему очень высокий z-index и установите для своего изображения как фон и display:none по умолчанию.
2. В каждом звене (или любой другой элемент, который вы хотите включить подсказки для него добавить data атрибут, в этом примере оно data-tooltip-title.
3. Использование JavaScript, при наведении курсора мыши над «tooltipped» элемента, придать значение из data-tooltip-title атрибут как текст подсказки, также top и left смещение элемента «tooltipped» как top и left для подсказки, и исчезать подсказки в.
4. на отведении указателя мыши, исчезают подсказки вне.

jsFiddle Demo

var links = $('[data-tooltip-title]'), 
 
    myTooltip = $('#my-tooltip'); 
 

 
links.each(function() { 
 
    var $this = $(this), 
 
    posLeft = $this.offset().left, 
 
    posTop = $this.offset().top, 
 
    title = $this.attr('data-tooltip-title'); 
 
    $this.hover(function() { 
 
    myTooltip.text(title).css({ 
 
     top: posTop + 20, 
 
     left: posLeft 
 
    }).fadeIn(); 
 
    }, function() { 
 
    myTooltip.fadeOut(); 
 
    }) 
 
})

#my-tooltip { 
 
    background: transparent url(//i.stack.imgur.com/ZNRfI.png) no-repeat; 
 
    width: 541px; 
 
    height: 113px; 
 
    color: white; 
 
    text-align: center; 
 
    line-height: 150px; 
 
    position: absolute; 
 
    left: -999px; 
 
    top: -999px; 
 
    z-index: 9999; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="test-div"> 
 
    Pie jelly-o chocolate sweet topping jujubes tiramisu cupcake kitkat muffin biscuit. Sesame snaps jelly <a href="#" data-tooltip-title="demo text for custom tooltip #1">halvah caramels macaroon</a> powder cake sweet. Toffee jelly-o halvah. Muffin cake macaroon wafer. 
 
    Chocolate carrot cake chupa chups. Soufflé candy canes cake. Toffee soufflé sweet roll fruitcake sesame snaps brownie jelly-o. Marshmallow dessert biscuit topping gummies gummi bears ice cream cookie 
 
    <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eum ducimus optio nesciunt <a href="#" data-tooltip-title="demo text for custom tooltip #2">porro delectus </a>nam ipsam voluptatem eaque, tempore voluptates enim? Maxime amet quas 
 
    unde eligendi recusandae esse cum? 
 
</div> 
 
<div id="my-tooltip"></div>

---

выше пользовательская подсказка не будет работать отлично, когда:

• Расстояние между "tooltipped" и очень правыми или нижней стороной окна браузера нет, чем ширина всплывающей подсказки.
• Текст элемента «tooltipped» завернут на две строки.
• Текст всплывающей подсказки длиннее ширины всплывающей подсказки.

Эти проблемы могут быть исправлены, но необходимы дальнейшие реализации.

Answer 2

Атрибут HTML title (что обычно считается «подсказкой») может быть только текстом. Для того, чтобы делать то, что вы хотите, посмотрите на Bootstrap «Popovers»: http://getbootstrap.com/javascript/#popovers