Лучший способ получить всплывающую подсказку вокруг изображения? - PullRequest
Новая
       22

Лучший способ получить всплывающую подсказку вокруг изображения?

0 голосов
/ 04 августа 2011

Я смотрел на некоторые плагины jQuery, чтобы показать всплывающую подсказку вокруг изображения, когда оно зависло.Но я не смог найти один, который я искал, чтобы была всплывающая подсказка с описанием, текстом и оценкой, используя одно и то же изображение внутри подсказки.

Так что я думал осделать свой собственный, и вы хотели бы знать, что вы, ребята, думаете о лучшем способе сделать это?

Общая идея состоит в том, что сверху есть ряд изображений, и когда пользователь наводит курсор на один, появляется округлый прямоугольник с тем жеизображение внутри, и оно заполняет информацию слева от изображения.И они должны оставить подсказку, чтобы она исчезла, а не миниатюра.

А знаете ли вы, ребята, какие-либо плагины для всплывающей подсказки jQuery, которые делают это?Не нужно изобретать велосипед. 

<div class="item">
    <div class="thumbail">
        <img src="" alt="" />
    </div>

    <div class="hiddentooltipinfo">
        <div class="tooltipinfo">
            <div class="info">
                <h3>Title</h3>
                <p>Text</p>
            </div>

            <div class="rating">
                <p>85%</p>
            </div>
        </div>
    </div>
</div>

Ответы [ 2 ]

2 голосов
/ 04 августа 2011
  • Я не нашел плагин всплывающей подсказки , который мне нравится. Я бы просто создал его самостоятельно.Я был бы готов помочь, если честно.
  • Я бы порекомендовал вам использовать атрибуты html img и поставить рейтинг в виде десятичного значения или процента с% знак.Оба четко указывают проценты.Кроме того, обязательно включите width и height атрибуты .
  • Плагин, который мне не понравился меньше всего, будет qTip . 
<!-- You could use this as your markup: -->
<div class="item">
    <div class="thumbail">
        <img src='' width='' height='' title='' alt='' data-rating='' />
    </div>
</div>

<!-- Depending on why you have the extra markup, you could potentially
     Just use the following: -->
<img src='' width='' height='' title='' alt='' data-rating='' />
0 голосов
/ 04 августа 2011

Просто используйте свойства ALT и TITLE на теге изображения, если вы хотите, чтобы в jquery были плагины и тому подобное для классных подсказокhttp://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

...