Jquery “请注意，”；标题「；和工具提示

在Prettypto中，如何让照片描述来自

“title”

（添加到

周围的

标记）之外的其他内容？当鼠标悬停在图像上时，它会在我的网站上显示难看的html，我只想在它打开时被Pretto看到和显示（因此它包含html），而不是作为工具提示

我的一个想法是插入一个事件，但唯一相关的是changepicturecallback，我不知道如何从中访问当前的照片元素

也许这是jQuery本身的一些东西，但我有点不知道在哪里可以找到它

任何想法都会有帮助

谢谢，

---

Igor

希望现在回答您的问题不会太晚，但我最近不得不修改了漂亮的照片代码，以满足您的要求

有一行设置锚定的“title”属性中的描述。您可以更改它以从任何地方获取描述。我决定在锚下创建一个标记来存储描述

要更改描述的来源，您必须修改pretty photos源。找到如下所示的行：

pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr('rel').indexOf(theRel) != -1) return ($(n).attr('title')) ? $(n).attr('title') : ""; }) : $.makeArray($(this).attr('title'));

它应该在第152行，至少从版本3.1.3开始。只需使用查找和替换工具搜索“pp_描述”

将其更改为：

pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr('rel').indexOf(theRel) != -1) return ($(n).find('p').text()) ? $(n).find('p').text() : ""; }) : $.makeArray($(this).find('p').text());

将“（this）.attr（'title'）”更改为“.find（'p'）.text（）”将在锚点中定位标记，而不是使用“title”属性。你可能想用CSS隐藏标签，这样它就不会显示在你的网站上

现在，html标记应该如下所示：

<a href="path/to/your/big-image.jpg" rel="prettyPhoto">
    <p>This is the Description</p>
    <img src="path/to/your/small-image.jpg" alt="caption text" />
</a>

pp_descriptions=(isSet)?jQuery.map(matchedObjects,function(n,i){if($(n).attr('rel').indexOf(theRel)!=-1)return($(n).attr('original-title'))?$(n).attr('original-title'):"";}):$.makeArray($(this).attr('original-title'))

---

这很好，但是如果我希望在标签中包含中断标签
或重音标题，则此信息似乎不起作用，否则会中断功能。我不敢相信漂亮的照片会让工具提示这么难被禁用

---

谁真的想用这些代码突出显示他们的描述P

谢谢你，凯尔！！！！！这真让我抓狂，最后你给我指路了。：）我想补充一点，如果你不想显示任何工具提示，只需在img标题中添加一个空格，即：title=“”，否则它会忽略它并返回锚标题。再次感谢

我也有类似的问题。但在我的例子中，只显示了第一个单词，因为HTML标记中缺少双引号，在这种情况下，请确保HTML中有title=标记，并且引用了：

<a title="Your Title Quoted" href="path/to/your/big-image.jpg" rel="prettyPhoto">
    <img src="path/to/your/small-image.jpg" alt="caption text" />
</a>

希望这也能有所帮助。

当您使用tipsy.js时，只需在jquery.prettypto.js中将“title”属性替换为“original title”

像这样：

<a href="path/to/your/big-image.jpg" rel="prettyPhoto">
    <p>This is the Description</p>
    <img src="path/to/your/small-image.jpg" alt="caption text" />
</a>

pp_descriptions=(isSet)?jQuery.map(matchedObjects,function(n,i){if($(n).attr('rel').indexOf(theRel)!=-1)return($(n).attr('original-title'))?$(n).attr('original-title'):"";}):$.makeArray($(this).attr('original-title'))

---

在米切尔所说的基础上：

我使用了.html（）而不是.text（），因为我使用了嵌套样式的跨距：

<span class="popup_text_cont">
      <span class="popup_caption_cont">
        <span class="popup_detail">
          <span class="popup_caption">Client</span>
          <span class="popup_basic_info">Playhouse Square Foundation</span>
        </span>
        <span class="popup_detail">
          <span class="popup_caption">Project</span>
          <span class="popup_basic_info">Broadway Buzz eNewsletter</span>
        </span>
        <span class="popup_detail">
          <span class="popup_caption">Skills</span>
          <span class="popup_basic_info">HTML, CSS</span>
        </span>
      </span>
      <span class="popup_description">
        Designed and implemented a templated eNewsletter that was distributed to theatergoers and Playhouse Square sponsors.
      </span>
    </span>

再加上这个

---

字体大小：0px！重要的
我也遇到了这个问题，并找到了这篇文章，这篇文章确实帮助了我：


我知道这个问题已经得到了回答，但我相信这种方法在格式方面允许更多的自由

引用文章：

<a href="path/to/your/big-image.jpg" rel="prettyPhoto" title="This is the native tooltip" aria-label="<h2> This is a caption.</h2> This caption has formatting and does not interfere with the native tooltips.">
    <img src="path/to/your/small-image.jpg" alt="alt-text" />
</a>

从您的站点打开jquery.prettypto.js文件并找到该行
其中包含以下代码：

pp_descriptions=isSet？jQuery.map（o，函数（t，n）{if（e（t）.attr（settings.hook）.indexOf（theRel）！=-1）返回
e（t）.attr（“title”）？e（t）.attr（“title”）：“”}）：e.makeArray（e（this.attr（“title”）

然后将其替换为“alt”属性：

pp_descriptions=isSet？jQuery.map（o，函数（t，n）{if（e（t）.attr（settings.hook）.indexOf（theRel）！=-1）返回
e（t）.attr（“alt”）？e（t）.attr（“alt”）：“”}）：e.makeArray（e（this.attr（“alt”）

这非常有效，您可以使用“h2”标记和“p”标记格式化标题但这不允许用户验证页面

因此，我没有使用'alt'属性，而是简单地用'aria-label'属性替换它，瞧！它按预期工作，并允许对页面进行验证

示例代码：

<a href="path/to/your/big-image.jpg" rel="prettyPhoto" title="This is the native tooltip" aria-label="<h2> This is a caption.</h2> This caption has formatting and does not interfere with the native tooltips.">
    <img src="path/to/your/small-image.jpg" alt="alt-text" />
</a>


非常感谢，已经有一段时间了，但它仍然相关，我一定会尝试！我花了很长时间才找到它，我希望它能帮助所有试图这样做的人。我发现如果你在title=“这个标题现在将显示为工具提示”alt=“把视频标题放在这里”中添加另一个标题，希望这有帮助！！！请将您的评论转换为答案。它应该是被接受的。非常感谢。这个解决方案对我也适用